border-collapse

table.test { border-collapse: separate;}
table.test1 { border-collapse: 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>

デスクトップ

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