プロパティ border-collapse

プロパティ border-collapse は、 HTML テーブルの td セル間または th セル間（およびセルの境界線とテーブル自体の境界線の間）の二重境界線を統合して1本のように見せます。

このプロパティは、テーブルおよび display プロパティの値が table または inline-table の要素にのみ適用されます。残念ながら、通常のブロック要素では機能しません。適用するのはセルではなく、テーブル自体に対してであることに注意してください。

構文

セレクタ {
	border-collapse: collapse | separate;
}

値

値	説明
`collapse`	二重境界線が1本のように表示されます。副作用として、プロパティ `border-spacing` および属性 `cellspacing` が機能しなくなります。
`separate`	テーブルの各セルが独自の境界線を持ちます（したがって、セル間の間隔がゼロの場合、一部の場所で境界線が二重になります）。

初期値: separate。

例 . separate 値

現在、テーブル内のすべての境界線は二重です（境界線はセルとテーブル自体の両方に設定されています）：

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

例 . separate 値

現在、境界線はセルに設定されていますが、テーブル自体には設定されていません。 2つのセルが境界線を共有する場所では境界線が二重になり、それ以外の場所では単一になります：

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
}
td {
	border: 1px solid red;
	text-align: center;
}

例 . collapse 値

現在、テーブル内のすべての境界線が統合され、 1pxの太さで表示されるようになります。期待通りの表示です：

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}