border-collapse

CSSborder-collapse プロパティは、 <table> の中のセルが境界線を共有するか分離するかを設定します。

セルが collapsed の場合、 border-style の値で insetgroove のように動作し、 outsetridge のように動作します。

セルが separated の場合、セルの間隔は border-spacing プロパティで定義されます。

構文

/* キーワード値 */
border-collapse: collapse;
border-collapse: separate;

/* グローバル値 */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;

border-collapse プロパティは、以下のリストから選択された単一のキーワードで指定します。

collapse
隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。
separate
隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。

形式文法

collapse | separate

ブラウザーエンジンのカラフルな表

HTML

<table class="separate">
  <caption><code>border-collapse: separate</code></caption>
  <tbody>
    <tr><th>Browser</th> <th>Layout Engine</th></tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
  </tbody>
</table>
<table class="collapse">
  <caption><code>border-collapse: collapse</code></caption>
  <tbody>
    <tr><th>Browser</th> <th>Layout Engine</th></tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
  </tbody>
</table>

CSS

.collapse {
  border-collapse: collapse;
}

.separate {
  border-collapse: separate;
}

table {
  display: inline-table;
  margin: 1em;
  border: dashed 5px;
}

table th,
table td {
  border: solid 3px;
}

.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ed { border-color: blue gold; }
.tr { border-color: aqua; }
.sa { border-color: silver blue; }
.wk { border-color: gold blue; }
.ch { border-color: red yellow green blue; }
.bk { border-color: navy blue teal aqua; }
.op { border-color: red; }

結果

仕様書

仕様書 状態 備考
CSS Level 2 (Revision 1)
border-collapse の定義
勧告 初回定義
初期値separate
適用対象table および inline-table 要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-collapseChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5Opera 完全対応 4Safari 完全対応 1.2WebView Android 完全対応 2.3Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報