CSS | テーブルの枠線を重ねる方法

2023-05-282023-06-07CSS テーブル,CSS

CSSでテーブルの枠線が、本体、見出し、セルなどで個別に余白ができている状態から、枠線を重ねて表示するようにする方法を紹介しています。

テーブルの枠線を重ねる

テーブルの枠線を重ねた場合の動作サンプルとHTML、CSSのサンプルコードになります。

See the Pen CSS | Change the border color and thickness of the Table by yochans (@yochans) on CodePen.

<table>
	<thead>
		<tr>
			<th>name</th>
			<th>Value</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Apple</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Banana</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Pine</td>
			<td>100</td>
		</tr>
	</tbody>
</table>

テーブルの枠線を重ねるにはtable要素に対して「border-collapse」プロパティで「collapse」を指定します。

この場合、tr要素、td要素に個別に指定する必要はありません。

table {
	/* 枠線を重ねる */
	border-collapse: collapse;
}