0

tdタグの境界線を処理する最良の方法はどのようになっていますか？

jsfiddle

http://jsfiddle.net/smxGH/

コード

<table>
    <tr>
        <td>wee</td>
        <td>wee</td>
        <td>wee</td>
    </tr>
    <tr>
        <td>wee</td>
        <td>wee</td>
        <td>wee</td>
    </tr>
</table>

table {
    margin:10px;
    border:0;
    border-spacing:0 0;
    border-collapse:separate;
}

td {
    border-top:1px solid white;
    border-bottom:1px solid black;
    border-right:1px solid #aaaaaa;
    border-left:1px solid #aaaaaa;
    padding:4px;
    background:#dddddd;
}

tr:hover > td {
    background:#cccccc;
}

上下の境界線を左右の境界線の上に配置する必要があります。これで、垂直方向の境界線が各セルで1pxオーバーラップします。CSSで解決することは可能ですか、それともdiv各タグ内にタグなどが必要tdですか？

さらに、上下が離れているのとは異なり、縦の境界線を折りたたむ必要があります（1pxの境界線）。

4

1 に答える 1

0

CSS ルールを修正tdし、いくつかの例外を追加しました。私はあなたを正しく理解したことを願っています。これはあなたが達成しようとしていたことですか？

td {
    border-top:1px solid white;
    border-bottom:1px solid black;
    padding:4px;
    background:#dddddd;
    border-right: 1px solid #aaaaaa;
}

td:last-child {
    border-right:1px solid #aaaaaa;
}

td:first-child {
    border-left:1px solid #aaaaaa;
}

私が見つけた上記と同じことを行う別の方法は次のとおりです。

table {
    margin:10px;
    border:0;
    border-collapse:separate;
    /* vvv changes here vvv */
    border-spacing:1px 0;
    background-color: #aaaaaa;
}

td {
    border-top:1px solid white;
    border-bottom:1px solid black;
    padding:4px;
    background:#dddddd;
}
于 2012-12-02T00:14:48.477 に答える