カテゴリー
border-collapse CSS

【CSS】border-collapse:テーブル(表)の隣接セルのボーダー表示方法を指定

(例)【CSS】border-collapseの使用方法

See the Pen
border-collapse
by linlin (@linlin098765)
on CodePen.

<table class="sample1">
<tr><td class="sample">1</td><td class="sample">2</td></tr>
<tr><td class="sample">3</td><td class="sample">4</td></tr>
</table>
<br> 
<table class="sample2">
<tr><td class="sample">1</td><td class="sample">2</td></tr>
<tr><td class="sample">3</td><td class="sample">4</td></tr>
</table>
table.sample1 {border: solid 1px #000000; border-collapse: collapse;}
table.sample2 {border: solid 1px #000000; border-collapse: separate;}
td.sample {border: solid 1px #ff0000}

【CSS】border-collapse:テーブル(表)の隣接セルのボーダー表示方法を指定

 CSSのborder-collapseは、テーブル(表)の隣接セルのボーダー表示方法を指定するプロパティです。

  • collapse
    隣接セルのボーダーを重ねて表示(初期値)
  • separate
    隣接セルのボーダーを間隔あれて表示