border-collapse

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

border-collapseCSS のプロパティで、表 (<table>) の中のセルが境界を共有するか分離するかを設定します。

試してみましょう

セルが折り畳まれている場合 (collapse)、 border-style の値で insetridge のように動作し、 outsetgroove のように動作します。

セルが分離されている場合 (separate)、セル間の距離は border-spacing プロパティで定義されます。

構文

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

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

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

collapse

隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。

separate

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

公式定義

初期値separate
適用対象table および inline-table 要素
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

border-collapse = 
separate |
collapse

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

HTML

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

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;
}

結果

仕様書

Specification
Cascading Style Sheets Level 2
# propdef-border-collapse

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-collapse
collapse
separate

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報