【border-collapse】テーブル(表)の枠線を単一の線にする

border-collapseプロパティでは、テーブル(表)や隣接するセルのボーダー(外枠線や内側罫線)を重ねて単一の線(1本線)として表示するか、別々に表示するかを指定できます。 枠線の表示形式にはseparate(隣接するボーダーを重ねて表示)、またはcollapse(間隔を空けて別々に表示)を指定します。

border-collapseプロパティは、table、td、th、trなどに指定できます。

またborder-collapseの値にcollapseを指定することで、幅や形式などの異なるボーダーが重なり合った場合の表示される優先順位は次のようになります。

  1. border-style:hiddenが設定されているボーダーが最優先される
  2. border-style:noneが指定されているボーダーがもっとも優先度が低い
  3. hidden、またはnone以外の値が指定されている場合は、幅が広いボーダー(枠線)の方が優先される
  4. 幅が同じ場合は、枠線の種類によって下記の順に優先されて表示される
    double > solid > dashed > dotted > ridge > outset > groove > inset
  5. border-color(枠線の色)だけが異なる場合は、下記の順に優先されて表示される
    th,td > tr > thead,tbody,tfoot > col > colgroup > table

なおcss2の仕様では、collapseがデフォルトに設定されています。 ですがInternet ExplorerやFirefoxでは、border-collapseを指定しないとseparateの状態で表示されますので注意して下さい。

書式

  • border-collapse : ……… セルのボーダー(枠線)の表示形式を指定

★:collapse、separate、inherit

collapse
テーブル全体の周りのボーダーや各セルのボーダーを重ねて表示する。
separate
テーブル全体の周りのボーダーや各セルのボーダーを間隔を空けて、別々に表示する。tableに対し背景を設定している場合は、各セルのボーダーとボーダーの間の空間部分に反映される。なお横列、縦列、横列グループ、縦列グループに対しては、ボーダーは表示されない。

使用した時の例

.sample1 {border-collapse: collapse;}
.sample2 {border-collapse: separate;}

table,td {border:solid 1px #ccc;}
<table class="sample1">
<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>

<table class="sample2">
<caption>border-collapse: separate;</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>

ブラウザ上の表示例

border-collapse: collapse
名前 説明 特徴
フジリンゴ 青森県南津軽郡藤崎町産のフジりんご 甘みと酸味のバランスが抜群!さっぱりとした食感
スリムレッド 群馬県農業総合試験場北部分場産のリンゴ 香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない
border-collapse: separate;
名前 説明 特徴
フジリンゴ 青森県南津軽郡藤崎町産のフジりんご 甘みと酸味のバランスが抜群!さっぱりとした食感
スリムレッド 群馬県農業総合試験場北部分場産のリンゴ 香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない

対応ブラウザなどのデータ

初期値 separate 値の継承 継承する
適用可能な要素 table要素
メディア visual / table
対応ブラウザ Internet Explorer5~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1.2~

関連情報