HTML & CSS

レシピ

テーブル

テーブル(表)のセルのサイズを指定する

テーブル(表)のセルの幅を指定する方法について解説します。

この記事のポイント

  • 列ごとにセルのサイズを指定する
  • 全てのセルを等幅にする

目次

テーブル(表)のセルのサイズを指定

table要素を使ってテーブルを作るとき、列の単位でセルの幅を指定したいことがあります。

例えば次のような表の場合、「ID」や「定員」についてはそこまで幅は必要ありませんが、「イベント名」は文字が多く入る可能性があるため、長めの幅をあらかじめ指定できると全体のバランスが整います。

表示例
表示例

テーブルはもともと列ごとのセルの幅は自動的に判断して設定をしてくれますが、CSSでしっかりと指定できた方が確実です。
そこで、th要素td要素と擬似クラス「:nth-child」を組み合わせて次のように幅を指定します。

コード例

<style>
table th:nth-child(1) {
	width: 15%;
}
table th:nth-child(2) {
	width: 40%;
}
table th:nth-child(3) {
	width: 15%;
}
table th:nth-child(4) {
	width: 30%;
}
</style>
</style>
<table>
	<tr>
		<th>ID</th>
		<th>イベント名</th>
		<th>定員</th>
		<th>開催日</th>
	</tr>
	<tr>
		<td>E080125</td>
		<td>Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月20日</td>
	</tr>
	<tr>
		<td>E080126</td>
		<td>BBQ大会</td>
		<td>40名</td>
		<td>18年8月23日</td>
	</tr>
	<tr>
		<td>E080127</td>
		<td>読書会</td>
		<td>20名</td>
		<td>18年8月25日</td>
	</tr>
	<tr>
		<td>E080128</td>
		<td>プラネタリウム鑑賞会</td>
		<td>15名</td>
		<td>18年8月28日</td>
	</tr>
	<tr>
		<td>E080129</td>
		<td>第2回 Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月30日</td>
	</tr>
	<tr>
		<td>E090130</td>
		<td>花火大会</td>
		<td>20名</td>
		<td>18年9月7日</td>
	</tr>
</table>

今回はテーブルの1行目がラベルとなり、th要素を使っているので「th:nth-child(1)」と指定しています。
もし1行目からtd要素で始まっている場合はtd要素に対して「td:nth-child(1)」と指定する形でも同じように幅を指定できます。

全てのセルを等幅にする

セルごと(列ごと)に幅を指定するのではなく、全体のセルの幅を等しくすることもできます。
その場合は、テーブルの親要素であるtable要素table-layoutプロパティを指定します。

表示例
表示例

コード例

<style>
table {
	table-layout: fixed;
}
</style>
</style>
<table>
	<tr>
		<th>ID</th>
		<th>イベント名</th>
		<th>定員</th>
		<th>開催日</th>
	</tr>
	<tr>
		<td>E080125</td>
		<td>Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月20日</td>
	</tr>
	<tr>
		<td>E080126</td>
		<td>BBQ大会</td>
		<td>40名</td>
		<td>18年8月23日</td>
	</tr>
	<tr>
		<td>E080127</td>
		<td>読書会</td>
		<td>20名</td>
		<td>18年8月25日</td>
	</tr>
	<tr>
		<td>E080128</td>
		<td>プラネタリウム鑑賞会</td>
		<td>15名</td>
		<td>18年8月28日</td>
	</tr>
	<tr>
		<td>E080129</td>
		<td>第2回 Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月30日</td>
	</tr>
	<tr>
		<td>E090130</td>
		<td>花火大会</td>
		<td>20名</td>
		<td>18年9月7日</td>
	</tr>
</table>

セルの文字数などで幅を左右されないため、こちらの方法でもテーブル全体のバランスは整って見えます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。