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

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

仕様	border-collapseプロパティの仕様
サンプル	テーブルの枠線を重ねて表示(collapse)
	テーブルの枠線を離して表示(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を指定してテーブルの一部の線を消しています。