カテゴリー
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">１</td><td class="sample">２</td></tr>
<tr><td class="sample">３</td><td class="sample">４</td></tr>
</table>
<br> 
<table class="sample2">
<tr><td class="sample">１</td><td class="sample">２</td></tr>
<tr><td class="sample">３</td><td class="sample">４</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
    隣接セルのボーダーを間隔あれて表示