HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


表の列に関してその幅を固定する

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プロパティを指定 サンプル