border-spacingプロパティ

プロパティ border-spacing は、 HTML テーブルの td セルまたは th セル間（およびセルの境界線とテーブル自体の間）の間隔を設定します。 プロパティの値には、パーセントを除く任意の サイズ単位を使用できます。

構文

cssセレクタ {
  border-spacing: 1つまたは2つの値;
}

値

デフォルト値: 0。しかし、 各ブラウザは属性 cellspacing に 独自のゼロ以外の値を持っているため、 デフォルトではセル間に間隔が表示されます。

備考

このプロパティはテーブルのセルに対してではなく、 テーブル自体に適用してください（セルには効きません）。

同様の効果を margin で 実現することはできません。なぜなら、 テーブルセルに対する margin は機能しないからです。

border-collapse プロパティが collapse に設定されている場合、 border-spacing は機能しません。

例 . 1つの値

セル間（およびセルとテーブル境界線の間）の間隔を 10px にしてみましょう:

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>

csstable {
  border-spacing: 10px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

例 . 2つの値

今度は、水平方向の間隔を 10px、 垂直方向の間隔を 30px にしましょう:

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>

csstable {
  border-spacing: 10px 30px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

例 . border-collapse: collapse を設定

今度は、border-collapse プロパティが collapse に設定されているため、 border-spacing は機能しません:

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>

csstable {
  border-collapse: collapse;
  border-spacing: 10px 30px;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: