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 テーブルの枠線の間隔を指定
初期値	separate
継承	継承する
参考(MDN)	https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse

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

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>

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

border-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>

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

赤とredの間の線を消しています。
border-collapseにcollapseを指定し、線を消す箇所にborderのnoneを指定します。
(10行目のborder-rightと13行目のborder-leftに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>

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が重なって表示がおかしくなる等は起こらなくなります。