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>
表示結果