CSS table-layout 属性

定義と使用法

tableLayout属性は、テーブルのセル、行、列のアルゴリズムルールを表示するために使用されます。

固定テーブルレイアウト：

固定テーブルレイアウトは、自動テーブルレイアウトと比較して、ブラウザがテーブルをレイアウトする速度を向上させます。

固定テーブルレイアウトでは、水平レイアウトはテーブルの幅、列の幅、テーブルの枠線の幅、セルの間隔に依存しており、セルの内容とは関係ありません。

固定テーブルレイアウトを使用することで、ユーザーエージェントは最初の行を受け取った後でテーブルを表示できます。

自動テーブルレイアウト：

自動テーブルレイアウトでは、列の幅は、折り返しなく最も幅広い内容で設定されます。

このアルゴリズムは時々遅くなることがあります。これは、最終的なレイアウトを確定する前にテーブル内のすべての内容にアクセスする必要があるためです。

説明

この属性は、テーブルレイアウトを完了するために使用されるレイアウトアルゴリズムを指定します。固定レイアウトアルゴリズムは高速ですが、柔軟性に欠け、自動アルゴリズムは遅いですが、伝統的なHTMLテーブルをよりよく反映します。

参照してください：

CSSチュートリアル：CSS 表格

HTML DOMリファレンスマニュアル：tableLayout属性

例

テーブルレイアウトアルゴリズムの設定：

table
  {
  table-layout:fixed;
  }

実際に試してみてください

CSS文法

table-layout: auto|fixed|initial|inherit;

属性値

値 説明
automatic デフォルト。列の幅は、セルの内容で設定されます。
fixed 列の幅は、テーブルの幅と列の幅で設定されます。
inherit table-layout属性の値は、親要素から継承されるべきことを定義しています。

技術的詳細

デフォルト値： auto
継承性： はい
バージョン： CSS2
JavaScript文法： object.style.tableLayout="fixed"

さらに多くの例

テーブルのレイアウトの設定
この例では、テーブルのレイアウトの設定方法を示します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
14.0 5.0 1.0 1.0 7.0