CSS border-collapse テーブルの枠線を重ねる/離す

border-collapseは、テーブルの枠線を重ねる/離します。

目次 border-collapseとは
重ねて表示(collapse) / 離して表示(separate)
テーブルの一部の線を消す
separateでテーブルを作成

border-collapseとは

書き方 border-collapse : 値
collapse・・・テーブルの枠線(ボーダー)を重ねて表示します。
collapseは崩壊という意味です。
separate・・・テーブルの枠線(ボーダー)を離して表示します。
separateは分けるという意味です。
border-collapseがseparateのときの枠線の間隔は、border-spacingで設定します。
CSS border-spacing テーブルの枠線の間隔を指定
初期値 separate
継承 継承する
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse

テーブルの枠線を重ねて表示(collapse)

<style>
  table {
    border-collapse: collapse; /* 枠線(ボーダー)を重ねて表示 */
    width: 100px;
  }
  td {
    border: 1px solid #000;
  }
</style>
<table>
  <tr>
    <td>1</td>
    <td>赤</td>
  </tr>
  <tr>
    <td>2</td>
    <td>青</td>
  </tr>
</table>

3行目は、border-collapseにcollapseを指定しています。

テーブルの枠線を離して表示(separate)

<style>
  table {
    border-collapse: separate; /* 枠線(ボーダー)を離して表示 */
    width: 100px;
  }
  td {
    border: 1px solid #000;
  }
</style>
<table>
  <tr>
    <td>1</td>
    <td>赤</td>
  </tr>
  <tr>
    <td>2</td>
    <td>青</td>
  </tr>
</table>

3行目は、border-collapseにseparateを指定しています。

テーブルの一部の線を消す

以下は、赤とredの間の線が消えています。
border-collapseにcollapseを指定し、線を消す箇所にborderのnoneを指定しています。

<style>
  table {
    border-collapse: collapse;
    width: 100px;
  }
  td {
    border: 1px solid #000;
  }
  .td1 {
    border-right: none;
  }
  .td2 {
    border-left: none;
  }
</style>
<table>
  <tr>
    <td>1</td>
    <td class="td1">赤</td>
    <td class="td2">red</td>
  </tr>
  <tr>
    <td>2</td>
    <td>青</td>
    <td>blue</td>
  </tr>
</table>

10行目はborder-right、13行目はborder-leftにnoneを指定してテーブルの一部の線を消しています。

separateでテーブルを作成

値がcollapseの場合、ブラウザのバージョンによってはテーブルの線の表示がおかしくなるときがあります。
その場合はseparateとborder-spacing=0で枠線の間隔をなくして、borderの部分指定を行います。

<style>
  table {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-collapse: separate;
    border-spacing: 0px;
  }
  td {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
</style>
<table>
  <tr>
    <td>テスト1</td>
    <td>テスト2</td>
    <td>テスト3</td>
  </tr>
  <tr>
    <td>テスト4</td>
    <td>テスト5</td>
    <td>テスト6</td>
  </tr>
</table>

3,4行目はtableタグの上と左にborderを指定しています。
9,10行目は、tdタグの右と下にborderを指定しています。
この場合、borderが重なって表示がおかしくなる等は起こらなくなります。

関連の記事

CSS padding 要素の内側の余白を指定する
CSS margin 外側の余白/中央・右に寄せる

△上に戻る