テーブルレイアウトプロパティ

最終更新：2026-09-13

table-layout テーブルレイアウトプロパティ

table-layout は表の列幅を計算するアルゴリズムを決定します。デフォルトの auto は内容に基づいて列幅を決めるため、大量の内容に合わせて列が広がります。fixed は最初の行または明示的な幅から列幅を決め、内容を無視して高速に描画されます。大量データの表に適しています。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS2
状態	標準

📝 構文

table-layout: auto | fixed;

⚙️ 値

値	タイプ	説明
`auto \| fixed`	キーワード	テーブルレイアウトのアルゴリズム

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
table-layout	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： table-layout: fixed に width: 100% と最初の行の th への width 設定を組み合わせると、等幅または比率に応じた列幅をすばやく実現できます。

❓ よくある質問

Qtable-layout: auto と fixed の違いは？

Aauto（デフォルト）：ブラウザがすべてのセルを走査し内容から列幅を計算するため、広い内容で列が伸びコンテナを破ることもあり、最初の描画が遅くなります。fixed：列幅は最初の行または明示的な幅から決まり内容を無視して高速に描画されます。あふれる内容は overflow や text-overflow で処理できます。

Qいつ table-layout: fixed を使うべきですか？

Aデータセットが大きい場合、列幅を固定したい場合、text-overflow: ellipsis でテキストを省略したい場合に fixed を使用してください。最初の行で幅が決まり描画が高速で、長い内容が表を破ることはありません。レスポンシブな表でも、均等な列幅のために fixed とパーセント幅がよく使われます。

Qtable-layout: fixed なのに幅の設定が適用されないのはなぜですか？

Afixed モードでは幅は最初のテーブル行（通常は th）から決まり、後続の行の td に設定した幅は無視されます。幅を制御するには、最初の行の th に設定するか、<colgroup> と <col> を使用してください。最初の行で幅が設定されていない場合、列は表の全幅を等分されます。これが auto との最大の動作の違いです。

Qtable-layout: fixed で表からあふれる内容を解決できますか？

Aはい。auto モードでは長い内容が列を伸ばしコンテナを破ることがあります。fixed モードでは幅が最初の行から決まり、あふれる内容はデフォルトで折り返されるかはみ出します。white-space: nowrap、overflow: hidden、text-overflow: ellipsis と組み合わせると、単一行の省略記号付き切り詰めになります。これは非常に長いテキストや表のあふれに対する標準的な組み合わせです。