Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

border-spacing

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

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

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

サンプルコード

style.css

/* 上下左右の隙間を10pxに統一 */
table.test { border-spacing: 10px;}

/* 水平方向20px、垂直方向10pxの隙間 */
table.test1 { border-spacing: 20px 10px;}

/* 隙間なし（border-collapse: separateのままで詰める） */
table.test2 { border-spacing: 0;}

/* border-collapse: separate と組み合わせた実践例 */
table.padded {
	border-collapse: separate;
	border-spacing: 6px 4px;
}
table.padded td {
	background-color: #f0f4ff;
	padding: 8px;
}

/* カレンダー風の均等な隙間レイアウト */
table.calendar {
	border-collapse: separate;
	border-spacing: 4px;
}
table.calendar td {
	width: 40px;
	height: 40px;
	text-align: center;
	background-color: #eee;
}

指定可能な値一覧

値	概要
数値	隙間を数値で指定できます。使用可能な単位は『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>