CSS | テーブルの列幅を揃える、均等にする

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

CSSでテーブルの列幅を揃える、均等にする方法とサンプルコードを紹介しています。

テーブルの列幅を揃える、均等にする

See the Pen CSS | Spacing between rows 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 Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Pine</td>
			<td>100</td>
		</tr>
	</tbody>
</table>

テーブルの列幅を揃える、均等にするには、「table-layout」プロパティにて「fixed」を指定します。

これにより、テーブル本体の幅（サンプルではwidth:100％）から列の数だけ割った均等幅が各列に指定されます。

動作サンプルの通り、セルに列幅を超える内容が入っていても、幅は広がらずに折り返されて表示されるようになります。

table {
	width:100%;
	table-layout: fixed;
}