CSS | 角丸を使ったテーブルデザイン

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

CSSの「border-radius」プロパティを利用して角丸にしたシンプルなテーブルのデザインサンプルになります。

角丸を使ったテーブルデザイン

テーブルに「border-radius」プロパティで角を丸くしたテーブルのデザインサンプルです。

テーブルの場合、どこの角を丸くするかによって大きく変わってきますが、以下サンプルではtr（見出し）とtd（セル）の角を丸くしています。

See the Pen CSS | Align top or right in a 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>

枠線の角を丸く場合は「border-collapse」プロパティの「collapse」で枠線を重ねないほうが良くなるかと思います。

見出しやセルの角を丸くるには、他の要素と同様に「border-radius」プロパティが有効です。

table {
	width: 100%;
}

th {
	width: 300px;
	text-align: left;
	background: gray;
	color: white;
	padding: 8px;
	border-radius: 10px;
}

td {
	width: 500px;
	background: lightgray;
	padding: 8px;
	border-radius: 10px;
}