Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

border-spacing

『border-collapse』プロパティの値が『separate』となっていた場合の各セルの隙間を指定できます。

1つの値のみを指定した場合は上下左右の隙間がその大きさで反映されます。

2つの値を指定した場合、1つ目の値は左右の隙間が、２つ目の値は上下の隙間がその大きさで反映されます。

サンプルコード

table.test { border-spacing: 10px;}
table.test1 { border-spacing: 20px 10px;}

指定可能な値一覧

値	概要
数値	隙間を数値で指定できます。使用可能な単位は『px』や『em』などで、『%』と『マイナスの値』は使えません。初期値は『0』となります。

ブラウザでの表示結果

以下のサンプルのtable要素には『border-collapse: separate』と『border: solid 1px #f00』、td要素にはそれぞれ『border: solid 1px #00f』と『border: solid 1px #0f0』を指定しています。

<table style=" border-spacing: 10px; border-collapse: separate; border: solid 1px #f00; margin: 0 auto;">
	<tr><td style="border: solid 1px #00f;">ここはtd要素です。</td><td style="border: solid 1px #0f0;">ここはtd要素です。</td></tr>
	<tr><td style="border: solid 1px #0f0;">ここはtd要素です。</td><td style="border: solid 1px #00f;">ここはtd要素です。</td></tr>
</table>

<table style=" border-spacing: 20px 10px; border-collapse: separate; border: solid 1px #f00; margin: 0 auto;">
	<tr><td style="border: solid 1px #00f;">ここはtd要素です。</td><td style="border: solid 1px #0f0;">ここはtd要素です。</td></tr>
	<tr><td style="border: solid 1px #0f0;">ここはtd要素です。</td><td style="border: solid 1px #00f;">ここはtd要素です。</td></tr>
</table>