border-spacingプロパティはborder-collapseプロパティの値がseparateの場合に、隣接しているボーダーの間隔を調整します。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<長さ> <長さ>｜inherit

初期値

0

適用される要素

テーブル要素とインラインテーブル要素

継承

します

パーセント値

N/A

メディア

visual

値の解説

<長さ> <長さ>

値が1つの場合は、上下左右の間隔が指定され、値が2つの場合は、最初の値が左右の間隔、二つ目の値が上下の間隔になります。
なお、これに寄って生じたスペースはテーブル要素の背景が表示されます。また、マイナス値は不正になります。

border-spacingのサンプル

<table>
<tr>
<th>border-spacing</th>
<td>サンプル</td>
</tr>
</table>

table {
  margin: 10px 10px 20px;
  border: 1px solid #666;
  border-collapse: separate;
  border-spacing: 5px 10px;
}

table th {
  width: 150px;
  padding: 10px;
  background: #efefef;
  border: 1px solid #666;
}

table td {
  width: 230px;
  padding: 10px;
  border: 1px solid #666;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

border-spacing	サンプル