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

CSSのborder-collapseプロパティで、テーブルの枠線を重ねる/離すサンプルです。

仕様	border-collapseプロパティの仕様
サンプル	テーブルの枠線を重ねて表示(collapse)
	テーブルの枠線を離して表示(separate)
	テーブルの一部の線を消す
	separateでテーブルを作成

border-collapseプロパティの仕様

border-collapse : 値

border-collapseプロパティは、テーブルの枠線を重ねるまたは離します。

値	説明
collapse	テーブルの枠線(ボーダー)を重ねて表示します。 collapseは崩壊という意味です。
separate	テーブルの枠線(ボーダー)を離して表示します。(初期値) separateは分けるという意味です。
値を継承する

border-collapseがseparateのときの枠線の間隔は、border-spacingで設定します。
CSS border-spacing テーブルの枠線の間隔を指定

以下はMDNのborder-collapseプロパティのリンクです。
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>テスト１</td>
    <td>テスト２</td>
    <td>テスト３</td>
  </tr>
  <tr>
    <td>テスト４</td>
    <td>テスト５</td>
    <td>テスト６</td>
  </tr>
</table>

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