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』プロパティを使用してください。

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

トップページへ

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