CSS border-spacing テーブルの枠線の間隔を指定

border-spacingは、テーブルの枠線の間隔を表します。

目次 border-spacingとは
上下左右にセット(数値+単位)
左右と上下にセット(数値+単位 数値+単位)
背景色を指定してテーブルを作成するサンプル

border-spacingとは

書き方 border-spacing : 値 → 上下左右を指定
border-spacing : 値 値 → 左右と上下を指定
数値+単位(px)・・・テーブルの枠線の間隔を上下左右に指定します。
数値+単位 数値+単位・・・テーブルの枠線の間隔を左右と上下に指定します。
border-collapseプロパティの値がseparate(枠線を離して表示)のときのみ使用します。
CSS border-collapse テーブルの枠線を重ねる/離す
初期値 0
継承 継承する
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/border-spacing

枠線の間隔を上下左右にセット(数値+pxを指定)

<style>
  table {
    border-collapse: separate;
    border-spacing: 5px;
    width: 100px;
    border: 1px solid #000;
  }
  td {
    border: 1px solid #000;
  }
</style>
<table>
  <tr>
    <td>1</td>
    <td>赤</td>
  </tr>
  <tr>
    <td>2</td>
    <td>青</td>
  </tr>
</table>

4行目は、border-spacingに5pxを指定しています。上下左右にセットされます。

枠線の間隔を左右と上下にセット(数値+pxを2つ指定)

<style>
  table {
    border-collapse: separate;
    border-spacing: 15px 5px;
    width: 100px;
    border: 1px solid #000;
  }
  td {
    border: 1px solid #000;
  }
</style>
<table>
  <tr>
    <td>1</td>
    <td>赤</td>
  </tr>
  <tr>
    <td>2</td>
    <td>青</td>
  </tr>
</table>

4行目は、border-spacingに15pxと5pxを指定しています。最初が左右で次が上下です。

背景色を指定してテーブルを作成するサンプル

以下は、背景色としてtableに赤、tdに白を指定しています。borderは使用していません。

<style>
  table {
    border-collapse: separate;
    border-spacing: 1px;
    width: 100px;
    background: red;
  }
  td {
    background: white;
  }
</style>
<table>
  <tr>
    <td>1</td>
    <td>赤</td>
  </tr>
  <tr>
    <td>2</td>
    <td>青</td>
  </tr>
</table>

6行目は、tableの背景色にredを指定しています。
9行目は、tdの背景色にwhiteを指定しています。

テーブルの一部の線を消す場合は、border-collapseにcollapseを指定します。

関連の記事

CSS border-collapse テーブルの枠線を重ねる/離す
CSS border ボーダーの表示方法を指定する

△上に戻る