Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

border-collapse

概要

CSS の border-collapse プロパティは、表の 境界線 (border) の形式を選びます。このプロパティは、表のセルの外見やスタイルに大きく影響します。

separated 形式は、従来の HTML 表の形式です。各セルは別個に境界線を持っています。隣接セルの境界線間の距離を border-spacing プロパティで与えられます。

collapsed 形式では、表の隣接セルは境界線を共有します。この形式では border-style の値 insetgroove のように動作し、outsetridge のように動作します。

初期値separate
適用対象table および inline-table 要素
継承継承する
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: collapse | separate
border-collapse: collapse
border-collapse: separate

border-collapse: inherit

separate
表の境界線を別個に描画する形式。デフォルトです。
collapse
表の境界線を共有する形式。

実際の表示を確認

th, td { border: solid 1px red; }
table { border-collapse: collapse; }
border-collapse: separate
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit
border-collapse: collapse
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit

仕様書

仕様書 策定状況 コメント
CSS Level 2 (Revision 1)
The definition of 'border-collapse' in that specification.
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 5.0 4.0 1.2 (125)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 1.0 (1.9.2) ? ? ?

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: fscholz, teoli, ethertank, sosleepy
 最終更新者: fscholz,