table-layout

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

この例は表の固定レイアウトを使用し、 width プロパティとの組み合わせで、表の幅を制限しています。 text-overflow プロパティを使用して、語が長すぎる場合は省略記号を使用するようにしています。

表のレイアウトが auto である場合、表は指定された width よりも内容に合わせて広がります。

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: 120px;
  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 要素
継承なし
計算値指定値
アニメーションの種類個別

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
table-layoutChrome 完全対応 14Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1.5Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応