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

CSSのborder-spacingプロパティで、テーブルの枠線の間隔を指定するサンプルです。

目次

仕様 border-spacingプロパティの仕様
サンプル 枠線の間隔を上下左右にセット(数値+pxを指定)
  枠線の間隔を左右と上下にセット(数値+pxを2つ指定)
  背景色を指定してテーブルを作成するサンプル

border-spacingプロパティの仕様

border-spacing : 値 → 上下左右を指定
border-spacing : 値 値 → 左右と上下を指定

border-spacingプロパティは、テーブルの枠線の間隔を指定します。

説明
数値 + 単位   テーブルの枠線の間隔を指定します。 
初期値は0です。
値を継承する

border-collapseプロパティの値がseparate(枠線を離して表示)のときのみ使用します。
CSS border-collapse テーブルの枠線を重ねる/離す

以下はMDNのborder-spacingプロパティのリンクです。
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 padding 要素の内側の余白を指定する
CSS margin 要素の外側の余白を指定する
CSS border-collapse テーブルの枠線を重ねる/離す
CSS border ボーダーの表示方法を指定する

△上に戻る