Caution

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

CSSプロパティ辞典

border-collapse

表の各セルの境界線の共有形式を指定します。

サンプルコード
table.test { border-collapse: separate;}
table.test1 { border-collapse: collapse;}
指定可能な値一覧
概要
separate表の境界線を別個に描画します。これが初期値です。
collapse表の境界線を共有します。
ブラウザでの表示結果

以下のサンプルのtable要素には『border: solid 1px #f00』、td要素にはそれぞれ『border: solid 1px #00f』と『border: solid 1px #0f0』を指定しています。

<table style="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-collapse: collapse; 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-collapse』プロパティを指定できるのはtable要素かinline-table要素となります。

『separate』を指定した場合の各セルの空き具合を調節したい場合は『border-spacing』プロパティを使用してください。

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