border-spacing

CSSプロパティ「border-spacing」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

border-spacing

セルの罫線の間隔を指定するプロパティ。

border-collapseの値にseparateが指定されている場合、border-spacingでその間隔を指定することができる。

数値で指定 px、pt、em等の単位で指定。

使用例

サンプル

[CSSの記述]

.sample {
	border:solid 1px #00c;
	border-collapse: separate;
	border-spacing:20px;
}
.sample td { border:solid 1px #c00; }

[HTMLの記述]

<table class="sample">
	<tr><th>1着</th><td>ディープインパクト</td><td>武豊</td></tr>
	<tr><th>2着</th><td>ポップロック</td><td>O.ペリエ</td></tr>
	<tr><th>3着</th><td>ダイワメジャー</td><td>安藤勝己</td></tr>
</table>

[ブラウザ上の表示]

1着ディープインパクト武豊
2着ポップロックO.ペリエ
3着ダイワメジャー安藤勝己