CSS2: border-collapse プロパティ - テーブル要素のセル境界の表示方法

■ 概要

項　　目説　　明
記述形式 セレクタ {border-collapse: 値 }
値 の形式 collapse，separate，inherit
初 期 値 separate
対応ブラウザー C2+ / e5+ / N?+ / Fx1+ / Op4+ / Ch1+ / Sa1.2+
適用可能な要素 <table>
継　　承 する

■ 解説

border-collapseプロパティ は，table要素に対してセルの境界線の表示方法を指定します。

指定できる値の形式は，以下のとおりです。

値説　　明
collapse 隣接セルの境界線を同士を間を空けずに重ねて表示します。
separate 隣接セルの境界線を間を空けて離して表示します。
inherit 親要素の指定値を継承します。
備　　考 separate の場合の間隔は border-spacing プロパティの値になります。

なお，値を collapse にした場合は，隣接するセルやテープルの境界線はすべて重ね合わせて表示されますが， collapse は元々 "折りたたむ" とか "つぶす" の意味で，境界線同士の間隔をとらずにこれらを重ねることを意味します。

W3C の CSS current work によると，現在，CSS3 を対象とした CSS Tables Level 3 のワーキンググループは活動しておらず，現状では，table要素 に関する資料は， 2011年6月7日に勧告された CSS2.1 の もの しかありません。

このプロパティは，CSS3 では廃止される可能性がありますので， とくに必要としない場合は使用しない方が無難です。

■ 使用例　（ border-collapseプロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   table.sample1 { 
      border-collapse: separate;
      border-spacing: 3px;
      padding: 3px;
      border: solid 1px #999999; }
   table.sample2 { 
      border-collapse: separate;
      border-spacing: 6px;
      padding: 3px;
      border: solid 1px #999999; }
   table.sample3 { 
      border-collapse: collapse;
      border-spacing: 6px;
      padding: 3px;
      border: solid 1px #999999; }
-->
</style>
HTML
<body> ～ </body>		 
<table class="sample1" style="float: left">
 <caption>border-spacing: 3px;</caption>
 <tr><th>■■</th><th>●●</th><th>▲▲</th></tr>
 <tr><td>□□</td><td>◎◎</td><td>△△</td></tr>
 <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr>
</table>
<table class="sample2" style="float: left; margin-left: 30px;">
 <caption>border-spacing: 6px;</caption>
 <tr><th>■■</th><th>●●</th><th>▲▲</th></tr>
 <tr><td>□□</td><td>◎◎</td><td>△△</td></tr>
 <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr>
</table>
<table class="sample3" style="float: left; margin-left: 30px;">
 <caption>border-collapse: collapse;</caption>
 <tr><th>■■</th><th>●●</th><th>▲▲</th></tr>
 <tr><td>□□</td><td>◎◎</td><td>△△</td></tr>
 <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr>
</table>
<br style="clear: left">

ブラウザー 表示例
border-spacing: 3px;
■■●●▲▲
□□◎◎△△
◇◇○○▽▽
border-spacing: 6px;
■■●●▲▲
□□◎◎△△
◇◇○○▽▽
border-collapse: collapse;
■■●●▲▲
□□◎◎△△
◇◇○○▽▽

なお，border-collaps プロパティの値を separate とした場合には，テーブルの周辺の境界線とその内側にあるセル境界までの間隔は， padding の値（この例では 3px）を加えた値となり，内部のセル同士の 間隔より大きくなっています。

また，border-collaps プロパティの値を collaps に指定すると，table要素の border-spacing や padding の指定は無効になります。

■ 備考

【参考ページ】