CSS - border-collapse

• トップ
• CSSリファレンス
• border-collapse

概要

サポート (説明)

説明

隣り合ったテーブルセルの枠線の描画方法を指定します。

使用例

.sample-collapse {
  border-collapse: collapse;
  border: 1px solid #888;
  margin: 0em 1em 1em 1em;
}
.sample-separate {
  border-collapse: separate;
  border: 1px solid #888;
  margin: 0em 1em 1em 1em;
}
.sample-collapse td {
  border: 1px solid #888;
  width: 100px;
}
.sample-separate td {
  border: 1px solid #888;
  width: 100px;
}

<h5>collapse</h5>
<table class="sample-collapse">
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>

<h5>separate</h5>
<table class="sample-separate">
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>

リンク

• https://www.w3.org/TR/CSS2/tables.html#borders
• http://www.y-adagio.com/public/standards/tr_css2/tables.html#propdef-border-collapse
• https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse
• http://caniuse.com/#search=border-collapse