【CSS】テーブルのセルの横幅を均等にする方法

テーブルで表を作成するとき、覚えておくと便利そうなスタイルが table-layout というプロパティです。
先日初めて使いましたが、このプロパティを適用すると、テーブルのセルの横幅が均等になるので、なかなか見やすい表を作成できました。
ただ、表示させるデータにもよるかな。

サンプルは下記のとおりです。

上は、表の横幅を指定しただけのテーブルで、下は table-layout に fixed を指定したテーブルです。
上記のように、横幅が均等になるので、類似データを表示するときに重宝しそう。

下の表のコードは下記のとおりです。

<table border="1" id="fixed">
    <tr>
        <th>月曜日</th>
        <th>火曜日</th>
        <th>水曜日</th>
        <th>木曜日</th>
        <th>金曜日</th>
        <th>土曜日</th>
        <th>日曜日</th>
    </tr>
    <tr>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
        <td>Sunday</td>
    </tr>
</table>

#fixed {
    width:800px;
    table-layout: fixed;
}

見てわかる通り、table-layout: fixed; を指定しているだけです。
なお、table-layout プロパティは、テーブルの横幅が指定されていないと有効にならないため、必ず width プロパティを指定しましょう。

ちなみに、table-layout を適用したうえで、特定のセルのみの横幅のサイズを指定することもできます。
その場合は、横幅を指定したセル以外のセルは、引き続き均等の横幅で表示されます。

ちょっとしたことですが、セルの横幅が揃うだけでも、見やすさは大きく影響されますね。
また、テーブルに table-layout: fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあるのだとか。
行数が多いデータを扱う場合は、積極的に使っていきたいですね。

以上、テーブルのセルの幅をそろえて、見た目を整える方法でした。