2022-08-11

CSS: table の列幅の表示方法（固定・自動）を指定する

CSS でテーブルの列幅を固定表示にするか 自動表示にするかを指定する場合、 table-layout プロパティを使用します。
固定レイアウトの場合は「fixed」を指定し、自動レイアウトにする場合は「auto」を指定します。 初期値は「auto」です。

通常、テーブルを表示する場合は全てのデータを読み込んでから表示されます。固定レイアウトの場合は 最初の行を読み込んでからすぐに表示を始めるので、表示データ量の多いテーブルの場合は表示速度が速くなります。

使用例

table {
    table-layout: fixed;
}

auto

自動レイアウト。最初に表全体のデータを読み込み、セルの内容量に応じて列幅を決めます。

fixed

固定レイアウト。表の１行目を読みこんで、指定された列幅に応じて表示を開始します。 テーブル全体の幅を「width」プロパティで指定しておく必要があります。 セルの内容量は列幅には関係ありません。 幅が指定されていない列には、残りの幅が均等に割り当てられます。

table-layout のサンプル

自動レイアウト 「table-layout: auto;」

自動レイアウトの場合はセルの内容量に応じて列幅を自動で決めます。

サンプルデータ	サンプルデータサンプルデータサンプルデータ	サンプルデータ
サンプルデータ	サンプルデータサンプルデータサンプルデータ	サンプルデータ

<style>
    table.sample1 {
        table-layout: auto;
    }  
</style>

固定レイアウト 「table-layout: fixed;」

固定レイアウトの場合はセルの内容量に関係なく、指定した幅で表示します。

今回はテーブル全体の幅に「width: 100%」を指定し、各セルの幅に「width: 33%」を指定しています。 固定レイアウトの場合はテーブル全体の幅を指定する必要があることに注意してください。

サンプルデータ	サンプルデータサンプルデータサンプルデータ	サンプルデータ
サンプルデータ	サンプルデータサンプルデータサンプルデータ	サンプルデータ

<style>
    table.sample2 {
        table-layout: fixed;
        width: 100%;
    }
    sample2.td {
        width: 33%
    }  
</style>