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>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

各セルの隙間を指定できます。

『border-spacing』プロパティを反映させたい場合は『border-collapse』プロパティの値を『separate』とする必要がありますのでご注意ください。

『border-spacing』プロパティを指定できるのはtable要素かinline-table要素となります

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル