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

最終更新日:

公開日:2024-11-19

ページ内に広告が含まれています。
隣り合ったテーブルセルの間隔を指定する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プロパティについて解説しました。
それぞれの値を使い分ける事で、テーブルの表示方法が変わりますのでぜひ覚えておいてください。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP