border-collapse：表（テーブル）に含まれるセル同士が隣接する辺の境界を共有するか分離するかを指定する

border-collapseプロパティの説明

border-collapseは、表（テーブル）に含まれるセル同士が隣接する辺の境界を共有するか分離するかを指定します。通常、表は複数のセルを並べた格子状のインターフェイスをしており、そのマス目を一つの単位とした時に、くっつけて並べるか、間隔を置いて並べるかを選択します。

このプロパティは、セルの親要素である表そのものに与えます。具体的にはHTMLの<table>要素、あるいはCSSのdisplayプロパティにtableやinline-tableが指定されている要素に適用されます。

セル同士の間隔を調整する場合は、border-spacingを追加して下さい。

border-collapseに指定できる値

collapse

隣接するセル同士を密着させて境界を共有します。これが初期値です。

separate

隣接するセル同士の間に間隔を空けて、個別に境界を持たせます。

border-collapseの使い方とサンプル

border-collapseプロパティの構文は以下の通りです。

/* キーワード値 */
border-collapse: collapse;
border-collapse: separate;

/* グローバル値 */
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: unset;

border-collapseの実例

それでは実際に簡単な例を見てみましょう。ここでは、共通のスタイルを持つ表を並べて、border-collapseの値を変えた場合の挙動を確認します。

.samp_box {
	display: flex;
    flex-direction: row;
    flex-wrap: nowarp;
    justify-content: space-between;
    align-items: stretch;
	gap: 1rem;
	text-align: center;
}
.samp_box > div {
	flex: 1;
}
.samp_box table {
	width: 100%;
	border: 3px dashed #ccc;
}
#table_1 > table {
	border-collapse: collapse;
}
#table_2 > table {
	border-collapse: separate;
}
table td {
	border-top: 3px solid #fc605b;
	border-right: 3px solid #fcc15b;
	border-bottom: 3px solid #76fc5b;
	border-left: 3px solid #5b96fc;
}

<section class="samp_box">
	<div id="table_1">
		<table>
			<caption>collapse</caption>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
		</table>
	</div>
	<div id="table_2">
		<table>
			<caption>separate</caption>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
		</table>
	</div>
</section>

セル同士の間隔を調整する場合は、border-spacingを追加して下さい。上記の表にborder-spacingプロパティを追加すると、以下のように表示されます。この値は、border-collapseの値がseparateでなければ無効となります。

#table_1 > table {
	border-collapse: collapse;
	border-spacing: 10px;
}
#table_2 > table {
	border-collapse: separate;
	border-spacing: 10px;
}