border-collapseプロパティは、テーブルに適用するボーダーモデルの2つのうちいずれかを指定します。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

collapse｜separate｜inherit

初期値

separate (CSS2ではcollapse、CSS2.1からseparate)

適用される要素

テーブル要素とインラインテーブル要素

継承

します

パーセント値

N/A

メディア

visual

値の解説

collapse

ボーダーを統合表示させます。

separate

ボーダーを分離表示させます。
border-spacingプロパティの指定がある場合は隣接しているボーダーの間隔を調整する事ができます。

border-collapseのサンプル

<table class="collapseSample">
<tr>
<th>collapse サンプル</th>
<td>td</td>
</tr>
</table>

<table class="separateSample">
<tr>
<th>separate サンプル</th>
<td>td</td>
</tr>
</table>

table {
  margin: 10px 10px 20px;
  border: 1px solid #666;
}

table th {
  width: 150px;
  padding: 10px;
  background: #efefef;
  border: 1px solid #666;
}

table td {
  width: 230px;
  padding: 10px;
  border: 1px solid #666;
}

table.collapseSample {
  border-collapse: collapse;
}

table.separateSample {
  border-collapse: separate;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

collapse サンプル	td

separate サンプル	td