概要
CSS の border-collapse プロパティは、表の 境界線 (border) の形式を選びます。このプロパティは、表のセルの外見やスタイルに大きく影響します。
separated 形式は、従来の HTML 表の形式です。各セルは別個に境界線を持っています。隣接セルの境界線間の距離を border-spacing プロパティで与えられます。
collapsed 形式では、表の隣接セルは境界線を共有します。この形式では border-style の値 inset が groove のように動作し、outset が ridge のように動作します。
| 初期値 | 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 |
仕様書
ブラウザ実装状況
| 機能 |
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) |
? |
? |
? |