border-collapse

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

初期値
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の値分、横幅・縦幅が大きくなることになります。

Updated / Published