table-layout
CSSの書き方
table-layout:値 ;
CSSの詳細情報 | |||||
---|---|---|---|---|---|
プロパティ名 | table-layout | 読み方 | テーブル・レイアウト | ||
初期値 | auto | 意味 | テーブルの幅を固定 | ||
値 | auto/fixed | ||||
対象 | table(表)要素 | ||||
CSSレベル | CSSレベル2 | 対応ブラウザ | Windows | MAC | |
継承 | しない | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF |
解説
「table-layout」プロパティは、表の列の幅を自動もしくは、固定させて表示させるスタイルシートです。
通常、table要素の属性「width」が定められてない場合、列の幅は内容に応じて決定され表示されますが、表の内容がすべて読み込まれてから列の幅が決められるので、表全体が表示されるのに時間がかかってしまいます。
table-layout:fixed;
そこで、「table-layout:fixed;」とすると、表の最初の行が読み込まれた時点で列の幅が決定されるので、表のブラウジングの速度を向上させることができます。
ただし、値に「fixed」を指定した場合、表の最初の行td要素には必ず「width」属性を指定し、あらかじめ列の幅を決めておく必要があります。
また、表の列の幅は1行目が優先されますので、2行目以降内容によっては列に内容が収まらないこともあるので注意してください。
table-layout:auto;
「table-layout:auto;」は、通常のように表全体の内容が読み込まれてから列の幅が決定され表示されます。こちらが初期値になります。
CSS/HTMLサンプル
table { width:350px; border:1px solid #666666; margin-bottom:10px;}
table.tab1 { table-layout:auto; background:#f6f6f6; }
table.tab2 { table-layout:fixed; background:#ffdff9; }
td { border:1px solid #666666; padding:2px; }
table要素にtable-layoutプロパティを指定 サンプル