CSS - border-collapse

概要

属性名 border-collapse
値 collapse | separate
初期値separate
適用可能要素テーブル要素、またはテーブル内要素
継承継承しない
メディアVisual / Table

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS251141.2

説明

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

値説明
collapse重なり合わせて表示します。
separate離して表示します。隙間の間隔は border-spacing で調節します。

使用例

CSS
.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;
}
HTML
<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>
表示

collapse

AAABBB
CCCDDD

separate

AAABBB
CCCDDD

リンク

Copyright (C) 1997-2016 杜甫々
初版：1997年7月27日、最終更新：2016年5月8日
https://www.tohoho-web.com/css/prop/border-collapse.htm