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

最終更新日:

公開日:2024-11-13

ページ内に広告が含まれています。
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>
項目1 項目2 項目3
セルの内容 セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容 セルの内容
セルの内容 セルの内容 セルの内容

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

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

table {
    width: 100%;
    table-layout: fixed;
}
項目1 項目2 項目3
セルの内容 セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容 セルの内容
セルの内容 セルの内容 セルの内容

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

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

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

table {
    width: 100%;
    table-layout: fixed;
}
th:first-child,
td:first-child {
    width: 150px;
}
項目1 項目2 項目3
セルの内容 セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容セルの内容 セルの内容
セルの内容 セルの内容 セルの内容

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

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

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

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

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

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

さいごに

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

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP