border-collapse

style.css

/* セルの境界線を別個に描画（初期値） */
table.test { border-collapse: separate;}

/* セルの境界線を共有（隣接するセル同士で1本の線になる） */
table.test1 { border-collapse: collapse;}

/* collapse を使った実践的なテーブルスタイル */
table.clean {
	border-collapse: collapse;
	width: 100%;
}
table.clean th,
table.clean td {
	border: 1px solid #ddd;
	padding: 8px 12px;
}
table.clean th { background-color: #f4f4f4;}

/* separate と border-spacing を組み合わせた実践例 */
table.spaced {
	border-collapse: separate;
	border-spacing: 4px;
}

以下のサンプルの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>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1.1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

4 以降 ○

3 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

2.2 以降 ○

1 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

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

『border-collapse』プロパティを指定できるのはtable要素かinline-table要素となります。

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