border-collapse

Updated 2013.11.06 / Published 2007.02.02

border-collapseプロパティは表の枠（ボーダー）の表示モデルに結合ボーダーモデル、または分離ボーダーモデルのどちらを用いるのかを指定します。なお、border-collapseプロパティは子要素に継承されるので、table要素を内包できるdiv要素などに border-collapseプロパティを指定することでも、親要素から子要素の table要素へとその指定が継承されます。

値

collapse
separate
inherit

初期値

separate

適用対象

表要素（table要素）

継承

する

メディア

visual

border-collapseプロパティの値

border-collapseプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

collapse: 結合ボーダーモデルを用いて、セルを結合して、表の端から端まで連続した枠で表示させる（結合表示）
separate: 分離ボーダーモデルを用いて、各セルの周囲に分離した枠を表示させる（分離表示）

"collapse" の表示モデルを「結合ボーダーモデル（collapsing border model）」と呼び、"separate" の表示モデルを「分離ボーダーモデル（separated borders model）」と呼びます。

CSS2 仕様における初期値は "collapse" となっていましたが、実際の主要視覚ブラウザの実装における初期値は分離表示の "separate" となっていることから、CSS2.1 仕様では UA の実装状況にあわせて初期値が "separate" へと変更されています。

border-collapseプロパティの実装状況

IE: ◯
Firefox: ◯
Opera: ◯
Chrome: ◯
Safari: ◯
iOS: ◯
Android: ◯

サンプル

.collapse { border-collapse : collapse ; }
.separate { border-collapse : separate ; }
table,th,td { border : 1px solid #666 ; }

CSS2 仕様における初期値は "collpase" ですが、実際の主要視覚ブラウザは "separate" では初期値に設定されていたため、CSS2.1 仕様では "separate" に変更されました。CSS2 適合 UA に関わらず、ボーダーの結合表示を行いたい場合には、"border-collapse : collapse ;" を明示する必要があります。

なお、"separate"の場合は、"collpase"に比べてborder-spacingの値分、横幅・縦幅が大きくなることになります。