tableのセル幅を均等割にするtable-layout: fixed;の使い方【CSS】

tableは通常だとセルの内容によってセル幅が広がってしまう性質があります。その性質のせいで、一部のセルだけ内容が多くセル幅が広がって困った事はありませんか？
今回は、セルごとにCSSでwidthを設定する事無く、セル幅を均等割りにするtable-layoutプロパティの使い方を解説していきます。

table-layoutプロパティについて

table-layoutプロパティは、テーブル(表組み)のレイアウトを指定するプロパティです。
指定出来る値は以下の2つとなります。

auto

初期値となります。
表の幅、セルの内容によって自動的にセル幅が決められます。

fixed

表の幅によって、セル幅が自動的に均等割りになります。セルにwidthが指定されている場合は、指定されているセル以外が自動的に均等割りになります。

基本的な使い方

続いて、table-layoutプロパティの基本的な使い方です。
使い方は簡単で、tableに以下のCSSを追加するだけとなります。

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

CSSで何も指定しない場合

先ほど解説したtable-layout: fixed;を指定しない場合、以下のようにセルの内容によってセル幅が広がってしまい、見難いテーブルになってしまいます。

<table>
    <thead>
        <tr>
            <th>項目1</th>
            <th>項目2</th>
            <th>項目3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>セルの内容</td>
            <td>セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容</td>
            <td>セルの内容</td>
        </tr>
        <tr>
            <td>セルの内容</td>
            <td>セルの内容</td>
            <td>セルの内容</td>
        </tr>
    </tbody>
</table>

table-layout: fixed;を指定した場合

table-layout: fixed;を指定すると以下のようにセル幅を均等にする事ができます。

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

セルの内容が増えたとしても均等幅を保ってくれるので、共通のclassを作成しておくと列数が2列や4列などに増減したとしてもそのまま使用出来て便利です。

一部のセルだけ固定幅にする方法

一部のセルを固定幅にする場合は、固定したいセルに対してwidthを指定します。

table {
    width: 100%;
    table-layout: fixed;
}
th:first-child,
td:first-child {
    width: 150px;
}

それぞれ1つ目のthとtdが150pxに固定され、残りの2つのセルが均等幅になっています。
このように、幅を固定したいセルに対してwidthを指定すると、残りのセルが自動的に均等幅になります。

スマホサイズ時の表示について

table-layoutプロパティでセルを均等割にしても、スマホ等の幅の狭いデバイスではtableは見難くなりがちです。
列数が2列でセル内の文字数が少なければ、そのまま縮小表示で大丈夫ですが、そうでない場合には横スクロール等で表示するなど別途対応が必要になります。

先日、横スクロールできるテーブル(表)の作り方【CSS】で横スクロールが出来るテーブルの作り方を解説していますので参考にしてみてください。

table-layout: fixed;が効かない場合

table-layout: fixed;が効かない場合は親要素(table要素)にwidth指定がされているか確認してみてください。
基準となる親要素(table要素)のサイズが指定されていないと効かない場合が多いです。

さいごに

いかがでしたでしょうか。
今回は、tableのセル幅を均等割にするtable-layout: fixed;の使い方を解説しました。table要素は均等のセル幅で使いたい事も結構ありますので覚えておくと便利です。