Go to information

table-layout

table-layoutプロパティは表をレイアウトする際に固定レイアウトアルゴリズムを用いるか、自動レイアウトアルゴリズムを用いるかの表の横幅の計算方法を指定します。

値
初期値
auto
適用対象
表要素（table要素）
継承
しない
メディア
visual

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

fixed
表全体の横幅が明示されている（widthプロパティを用いると良い）場合に、表の水平方向の列幅はセルの内容量に依存しない代わりに、表全体の横幅・列幅・ボーダーサイズ・セル間の距離によってレイアウトされる固定レイアウトアルゴリズムを用いる
auto
表の横幅はセルの内容量に依存、表全体の横幅や高さを指定していても、セルに内容が収まらないと、指定は反映されず、表全体のデータを読み込んでから、その内容に応じて各列幅を決定し表示する自動レイアウトアルゴリズムを用いる

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

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

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

"auto" を指定した場合、表の全内容を読み込んだ後でないと最終的なレイアウトを決められないため、UA は表をレンダリングするのに時間がかかり、場合によっては非効率です。

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

Windows版Internet Explorer
○
Firefox
○
Opera
○
Safari
○
Macintosh版Internet Explorer 5
×

サンプル

記述例
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 ;" が指定されているので、列幅の総計が表全体の横幅を超えてしまうと、その分の列幅は自動的に調節が行われ広げてレイアウトされることになります。

現在位置
  1. W3G
  2. CSS
  3. テーブル
  4. table-layout
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:53:03+09:00
更新
2008-12-29T04:30:40+09:00
URI
http://w3g.jp/css/table/table-layout
検索

直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!