CSS | テーブルの行毎に行間・余白を開ける方法

2023-05-29CSS テーブル,CSS

CSSでテーブルの行毎に行間スペース・余白を開ける方法とサンプルコードを紹介しています。

テーブルの行毎に行間スペースを開ける

テーブルの行毎に行間スペースを開けるHTML、CSSのサンプルコードと動作サンプルになります。

See the Pen CSS | Align Table headers to the left 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>

テーブルの行間スペースを指定するには、「border-spacing」プロパティを利用します。

最初の値は横のスペースになり、2つ目の値で縦のスペースを指定する事が可能です。
行間のみスペースを入れたい場合は、0とスペースのサイズを並べて記述します。

また、「border-collapse」プロパティで「collapse（枠線を重ねる）」が指定されている場合、「border-spacing」は無効となりますので「separate（枠線を重ねない）」を指定します。

table {
	/* border-collapse: separate; */
	border-spacing: 0 10px;
}