Go to information

border-collapse

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

初期値
separate
適用対象
表要素table要素
継承
する
メディア
visual

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

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

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

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

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

Windows版Internet Explorer
Firefox
Opera
Safari
Macintosh版Internet Explorer 5
×

サンプル

記述例
.collapse { border-collapse : collapse ; }
.separate { border-collapse : separate ; }
table,th,td { border : 1px solid #666 ; }
表示例

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

現在位置
  1. W3G
  2. CSS
  3. テーブル
  4. border-collapse
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:03:24+09:00
更新
2008-12-29T04:30:36+09:00
URI
http://w3g.jp/css/table/border-collapse
検索