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>

 

枠線の間隔を左右と上下にセット(数値+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>

 

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

背景色としてtableに赤、tdに白を指定しています。borderは使用していません。
border-spacingは1pxです。
テーブルの一部の線を消す場合は、border-collapseにcollapseを指定します。

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

関連の記事

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

△上に戻る