Caution

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

CSSプロパティ辞典

  1. トップページ
  2. CSSプロパティ辞典
  3. border-spacing

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要素となります

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

シェア
このエントリーをはてなブックマークに追加