W3G

table-layoutプロパティの値

table-layoutプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

fixed

表全体の横幅が明示されている（widthプロパティを用いると良い）場合に、表の水平方向の列幅はセルの内容量に依存しない代わりに、表全体の横幅・列幅・ボーダーサイズ・セル間の距離によってレイアウトされる固定レイアウトアルゴリズムを用いる

auto

表の横幅はセルの内容量に依存、表全体の横幅や高さを指定していても、セルに内容が収まらないと、指定は反映されず、表全体のデータを読み込んでから、その内容に応じて各列幅を決定し表示する自動レイアウトアルゴリズムを用いる

"fixed" を指定した場合、各列幅は次の順序で計算されます。

1. col要素, colgroup要素に指定された横幅。
2. col要素, colgroup要素に横幅が明示されていない場合は1行目の表のセル要素に指定された横幅。
3. 表のセル要素にも横幅が明示されていない場合は表の横幅を表示域の左右いっぱいにまで広げ、列の数に応じて等分割した横幅。

つまり、"fixed" を指定した場合は、最初の表のソースの1行目部分を読み込んだ段階で 各列幅を決定することができるので、UAはスームズなレンダリングが可能になります。なお、表全体の横幅・高さは、widthプロパティ・heightプロパティで指定すると良いでしょう。

UA のレンダリングにおいて表が非効率なのには、table-layoutプロパティの初期値である"auto"が、表の全内容を読み込んだ後でないと最終的なレイアウトを決められないためです。"auto"に対して、"fixed" は、セルの最初の行の幅によって設定されるので特に長いテーブルの場合はレンダリングの速度が大幅に改善される（ユーザに情報をより速い速度で提供できる）ことが期待できます。

table-layoutプロパティの実装状況

IE

◯

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

サンプル

table    { background : navy ; width : 300px ; }
table td { background : white ; color : black ; }
.r1c2    { width : 100px;}
.r2c1    { width : 200px;}
.r3c3    { width : 100px;}
.cl1     { table-layout : fixed ; }
.cl2     { table-layout : auto ; }

このサンプルでは、1つ目の表には "table-layout : fixed ;" が指定されているので、列幅の総計が表全体の横幅である "300px" 以上であっても、表全体の横幅は列幅の総計にあわせて広げられてレイアウトされることはありません。これに対して、2つ目の表は "table-layout : auto ;" が指定されているので、列幅の総計が表全体の横幅を超えてしまうと、その分の列幅は自動的に調節が行われ広げてレイアウトされることになります。