CSS の table-layout プロパティは、 <table> のセル、行、列のレイアウトに使用されるアルゴリズムを指定します。

構文

/* キーワード値 */
table-layout: auto;
table-layout: fixed;

/* グローバル値 */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

auto
既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。
fixed
表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列幅の設定に影響しません。
"fixed" レイアウト方法に於いては、一度テーブルの一行目のみをダウンロードして解析した後、テーブル全体をレンダリングします。これは自動テーブルレイアウトアルゴリズムよりレンダリング速度を速くする事が出来ますが、後続するセルのコンテンツが用意された列幅に収まらないかもしれません。セルは overflow プロパティを使用して、表の幅が分かっている場合、はみ出すコンテンツを切り取るかどうかを定めます。そうでなければ、セルははみ出しません。

形式文法

auto | fixed

HTML

<table>
  <tr><td>Ed</td><td>Wood</td></tr>
  <tr><td>Albert</td><td>Schweitzer</td></tr>
  <tr><td>Jane</td><td>Fonda</td></tr>
  <tr><td>William</td><td>Shakespeare</td></tr>
</table>

CSS

table {
  table-layout: fixed;
  width: 100px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Result

仕様書

仕様書 状態 備考
CSS Level 2 (Revision 1)
table-layout の定義
勧告 初回定義

初期値auto
適用対象table および inline-table 要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応14121571
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1.5 ? あり49.83 ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, fscholz, Sebastianz, dskmori, ethertank
最終更新者: mfuji09,