【CSS】table の列幅の表示方法(固定・自動)を指定する

スポンサーリンク

CSS でテーブルの列幅固定表示にするか、 自動表示にするかを指定する場合は、 table-layout プロパティを使用します。

固定レイアウトの場合は「fixed」を指定し、自動レイアウトにする場合は「auto」を指定します。 初期値は「auto」です。

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

使用例


table {
    table-layout: fixed;
}

auto
自動レイアウト。最初に表全体のデータを読み込み、セルの内容量に応じて列幅を決めます。
fixed
固定レイアウト。表の1行目を読みこんで、指定された列幅に応じて表示を開始します。 テーブル全体の幅を「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>

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト