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

table-layout

解説

「table-layout」プロパティは、表の列の幅を自動もしくは、固定させて表示させるスタイルシートです。

通常、table要素の属性「width」が定められてない場合、列の幅は内容に応じて決定され表示されますが、表の内容がすべて読み込まれてから列の幅が決められるので、表全体が表示されるのに時間がかかってしまいます。

table-layout:fixed;

そこで、「table-layout:fixed;」とすると、表の最初の行が読み込まれた時点で列の幅が決定されるので、表のブラウジングの速度を向上させることができます。

ただし、値に「fixed」を指定した場合、表の最初の行td要素には必ず「width」属性を指定し、あらかじめ列の幅を決めておく必要があります。

また、表の列の幅は1行目が優先されますので、2行目以降内容によっては列に内容が収まらないこともあるので注意してください。

table-layout:auto;

「table-layout:auto;」は、通常のように表全体の内容が読み込まれてから列の幅が決定され表示されます。こちらが初期値になります。