border-collapse

border-collapseは、セルの枠線の重なりを指定するスタイルです。

解説

テーブルのセルに枠線を指定しただけだとセルの１つ１つに対して枠線がひかれるので
セルとセルの間に隙間が空いてしまいます。セルとセルの間に隙間を空けたくない場合は、border-collapseを使用すると枠線を重ねて表示させることができます。

border-collapseは trやtdタグではなく、tableタグに対して指定します。

構文

構文は以下になります。

値

border-collapseには以下の値が指定できます。

太字の値は初期値です。

サンプル

枠線を重ねずに表示する

table{
  border-collapse:separate;
  border:1px solid black;
}
td{
  border:1px solid black;
}

<table>
  <tr><td>子</td><td>丑</td><td>寅</td><td>卯</td></tr>
  <tr><td>辰</td><td>巳</td><td>午</td><td>未</td></tr>
  <tr><td>申</td><td>酉</td><td>戌</td><td>亥</td></tr>
</table>

枠線を重ねて表示する

table{
  border-collapse:collapse;
}
td{
  border:1px solid black;
}

<table>
  <tr><td>子</td><td>丑</td><td>寅</td><td>卯</td></tr>
  <tr><td>辰</td><td>巳</td><td>午</td><td>未</td></tr>
  <tr><td>申</td><td>酉</td><td>戌</td><td>亥</td></tr>
</table>

備考

• 枠線を重ねずに表示したい場合は、border-collapseは指定しなくても構いません。
• 枠線の間隔サイズを指定したい場合は、border-spacingを使用します。

関連項目

• border：枠線に関するスタイルをまとめて指定する
• border-color：枠線の色を指定する
• border-radius：枠線の角の丸みを指定する
• border-style：枠線のスタイルを指定する
• border-width：枠線の太さを指定する
• border-spacing：セルの枠線の間隔を指定する

Tweet