【border-spacing】セルのボーダーの間隔を指定

border-spacingプロパティでは、border-collapseの値が「separate」の場合に、隣接する各セルのボーダー(枠線)とボーダーの間の間隔を設定することができます。

またborder-spacingはテーブル要素などに対して指定することができ、値を半角スペースで区切って複数指定することもできます。 一つ、あるいは複数指定した場合は下記のように適用されます。

  • 値を1つ指定した場合 …… 「上下左右」の間隔
  • 値を2つ指定した場合 …… 「左右」「上下」の間隔

値を1つだけ指定した場合は、上下左右に同じ間隔が適用されます。 2つの値を半角スペースで区切って並べた場合は、最初の値が左右の間隔に、次の値が上下の間隔に適用されます。

なおマイナスの値は指定できませんので注意して下さい。

書式

  • border-spacing : ……… セルのボーダー(枠線)の間隔を指定する

★:実数値+単位、inherit

実数値+単位
数値にpxなどの単位を付けて枠線と枠線の間隔を指定する。

使用した時の例

.sample1 {
  border-collapse: separate;
  border-spacing: 50px 10px;
}

table {border:solid 1px #ccc;}
<table class="sample1">
  <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
  </tr>
  <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
  </tr>
</table>

ブラウザ上の表示例

1 2 3
1 2 3

対応ブラウザなどのデータ

初期値 0 値の継承 継承する
適用可能な要素 table要素
メディア visual
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~

関連情報