border-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

border-spacing は CSS のプロパティで、<table> における隣り合うセルの境界同士の間隔を定めます。このプロパティは border-collapse が separate のときのみ適用されます。

試してみましょう

border-spacing: 0;

border-spacing: 5px;

border-spacing: 5px 1rem;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <tr>
      <td>セル 1.1</td>
      <td>セル 1.2</td>
    </tr>
    <tr>
      <td>セル 2.1</td>
      <td>セル 2.2</td>
    </tr>
    <tr>
      <td>セル 3.1</td>
      <td>セル 3.2</td>
    </tr>
  </table>
</section>

table {
  width: 15rem;
  table-layout: fixed;
}

td {
  border: 5px solid;
  border-color: crimson dodgerblue;
  padding: 0.75rem;
}

border-spacing の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する border-spacing と、表の対応する側 (上下左右のいずれか) の padding の合計になります。

メモ: border-spacing プロパティは、<table> 要素における非推奨の cellspacing 属性と同等ですが、 border-spacing では任意で 2 つ目の値を指定して、水平方向と垂直方向に異なる間隔を設定することができる点が異なります。

構文

css

/* <length> */
border-spacing: 2px;

/* 左右の <length> | 上下の <length> */
border-spacing: 1cm 2em;

/* グローバル値 */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;

border-spacing プロパティは 1 つまたは 2 つの値で指定することができます。

1 つの <length> 値が指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。
2 つの <length> 値が指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う列の間隔) を定義し、2 番目の値がセル間の上下方向の間隔 (つまり、隣り合う行の間隔) を定義します。

値

<length>: 固定値による間隔の大きさです。

公式定義

初期値	`0`
適用対象	`table` および `inline-table` 要素
継承	あり
計算値	２つの絶対的な長さ
アニメーションの種類	離散値

形式文法

border-spacing = 
  <length>{1,2}

例

表のセルの余白とパディング

この例では表のセル間において、垂直方向に .5em、水平方向に 1em の間隔を適用します。なお、外の辺においては、表の padding の値が border-spacing の値に追加されます。

HTML

html

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

CSS

css

table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}

結果

仕様書

Specification
Cascading Style Sheets Level 2 # separated-borders