CSS - border-collapse
概要
属性名 | border-collapse |
---|---|
値 | collapse | separate |
初期値 | separate |
適用可能要素 | テーブル要素、またはテーブル内要素 |
継承 | 継承しない |
メディア | Visual / Table |
サポート (説明)
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS2 | 5 | 1 | 1 | 4 | 1.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
AAA | BBB |
CCC | DDD |
separate
AAA | BBB |
CCC | DDD |
リンク
- 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
Copyright (C) 1997-2016 杜甫々
初版:1997年7月27日、最終更新:2016年5月8日
https://www.tohoho-web.com/css/prop/border-collapse.htm