border-spacing

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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

構文

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

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

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

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

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

値

<length>

固定値による間隔の大きさです。

形式文法

<length> <length>?

例

CSS

table {
  border-spacing: 5px 12px;
  padding: 0 8px 8px 0;
  border: 1px solid orange;
}

td {
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  text-align: center;
}

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

結果

仕様策定状況

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• border-collapse, border-style
• border-spacing プロパティは HTML の <table> 要素の出現方法を変更します。