border-collapse

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

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

border-collapse

セルの罫線の表示方法を指定するプロパティ。

border-collapseの値により、セルの罫線を重ねて表示させるか、離して表示させるかを指定することができる。

separate セルの罫線を離して表示。
collapse セルの罫線を重ねて表示。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

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

[HTMLの記述]

<table class="sampleA">
	<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着ダイワメジャー安藤勝己
サンプル(B)

[CSSの記述]

.sampleB { border:solid 1px #00c; border-collapse:collapse; }
.sampleB td { border:solid 1px #c00; }

[HTMLの記述]

<table class="sampleB">
	<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着ダイワメジャー安藤勝己