隣り合ったテーブルセルの間隔を指定するborder-collapseプロパティについて【CSS】

テーブルのセルの間隔を指定できるborder-collapseプロパティ。
最近ではリセットCSSで指定されていて、変更する事も少ないのでどういった内容なのか知らない人も多いかと思います。今回は、そのborder-collapseプロパティについて解説していきます。

border-collapseプロパティとは

border-collapseプロパティとは、テーブルのセル同士の間隔を空けるかどうかを指定出来るプロパティです。
最近ではリセットCSSで間隔を空けない指定になっている事も多いですが、プロパティの値を変更する事もありますので、変更する際は以下の内容を参考にしてみてください。

border-collapseプロパティの使い方

border-collapseプロパティの使い方は以下のコードをご覧ください。

table {
    border-collapse: 値;
}

上記のように、table要素に対して指定します。指定出来る値は次の項目をご覧ください。

指定出来る値

border-collapseプロパティで指定出来る値は以下の2つとなります。

separate

テーブルのセル同士の間隔を空けます。
何も指定しない場合はseparateが初期値となります。
セル同士の間隔の大きさは、border-spacingプロパティで指定可能です。詳しくはテーブルのセル同士の間隔を指定するborder-spacingプロパティの使い方【CSS】をご覧ください。

collapse

テーブルのセル同士の間隔を空けません。
セルのボーダーが重なって表示されます。

次にborder-collapseの値をそれぞれ指定した場合について解説していきます。

border-collapse: separate;の場合

border-collapse: separate;を指定した場合は以下のようになります。

<table>
	<thead>
		<tr>
			<th>見出し</th>
			<th>見出し</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>内容</td>
			<td>内容</td>
		</tr>
	</tbody>
</table>

table {
    border-collapse: separate;
}

上記例のように、各セル同士の間隔が空いて表示されます。
セル同士の間隔の大きさはborder-spacingプロパティで10pxを指定しました。border-spacingプロパティについては、テーブルのセル同士の間隔を指定するborder-spacingプロパティの使い方【CSS】をご覧ください。

border-collapse: collapse;の場合

border-collapse: collapse;を指定した場合は以下のようになります。

<table>
	<thead>
		<tr>
			<th>見出し</th>
			<th>見出し</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>内容</td>
			<td>内容</td>
		</tr>
	</tbody>
</table>

table {
    border-collapse: collapse;
}

separateとは違い、セル同士の間隔が空いていなく、セルのボーダーも重なって表示されます。

さいごに

いかがでしたでしょうか。
今回は、隣り合ったテーブルセルの間隔を指定するborder-collapseプロパティについて解説しました。
それぞれの値を使い分ける事で、テーブルの表示方法が変わりますのでぜひ覚えておいてください。