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

列幅を均等にする

テーブルの列幅を均等にするには、tableタグのセレクタにtable-layout: fixed;を設定します。注意点としてはテーブルの横幅が自動（auto）になっていると均等にならないため、widthを設定しておく必要があります。

table.class{
	width: 300px;
	table-layout: fixed;
}

テーブルの内容によって列幅が崩れることもなく、見やすいテーブルにすることができます。

特定の列の幅を指定する

table-layout: fixed;をおこなったうえで特定の列に横幅を指定するとどうなるかと言うと、横幅を指定された列はその横幅になり、指定されていない列は残りの横幅で均等になります。

CSSで特定の列の幅を指定

/* 1列目の幅を指定 */
table.class th:nth-child(1){
	width: 150px;
}

HTMLで特定の列の幅を指定

<table class="class">
	<tr><th style="width:150px;">見出し</th><th>見出し</th><th>見出し</th></tr>
	<tr><td>内容</td><td>内容</td><td>内容</td></tr>
</table>