border-collapse

解説

隣接するセルのボーダーを重ねて表示するか(collapse)、間隔をあけて表示するか(separate)を指定します。

プロパティ情報

値:collapse,separateのいずれか
初期値:collapse
適用対象:表要素
継承:する
パーセンテージ:不可
適用メディア:視覚
レベル:2

参照

使用例

ソース

CSSの記述方法はスタイルシートってなに?も参照下さい。

table.sample1 {border: solid 1px #ff0000; border-collapse: collapse;}
table.sample2 {border: solid 1px #ff0000; border-collapse: separate;}
td.sample1    {border: solid 1px #0000ff; width:80px;}
HTMLの記述方法

<table class="sample1">
<tr><td class="sample1">1</td class="sample1"><td class="sample1">2</td class="sample1"><td class="sample1">3</td class="sample1"></tr>
<tr><td class="sample1">4</td class="sample1"><td class="sample1">5</td class="sample1"><td class="sample1">6</td class="sample1"></tr>
<tr><td class="sample1">7</td class="sample1"><td class="sample1">8</td class="sample1"><td class="sample1">9</td class="sample1"></tr>
</table>
<table class="sample2">
<tr><td class="sample1">1</td class="sample1"><td class="sample1">2</td class="sample1"><td class="sample1">3</td class="sample1"></tr>
<tr><td class="sample1">4</td class="sample1"><td class="sample1">5</td class="sample1"><td class="sample1">6</td class="sample1"></tr>
<tr><td class="sample1">7</td class="sample1"><td class="sample1">8</td class="sample1"><td class="sample1">9</td class="sample1"></tr>
</table>

表示結果

123
456
789
123
456
789