テーブルの表示スピードを速くさせる

通常、table要素の属性「width」が定められてない場合、列の幅は内容に応じて決定され表示されますが、表の内容がすべて読み込まれてから列の幅が決められるので、表全体が表示されるのに時間がかかってしまいます。
table-layout: fixed;を指定すると、表の1行目が読み込まれた時点で列幅が決定されるので、表のレンダリング速度を向上させることができます。

CSS記述

 
table {
    width: 450px;
    border: 1px solid #999999;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8em;
    line-height: 1.3;
}
 
th.property {
    width: 80px;
}
 
th,td {
    background: #FFEEEE;
    border: 1px solid #999999;
    padding: 2px;
}
 

HTML記述

 
<table>
    <tr>
        <th class="property">プロパティ</th>
        <th>説明</th>
    </tr>
    <tr>
        <td>auto</td>
        <td>通常のように表全体の内容が読み込まれてから列の幅が決定され表示されます。こちらが初期値になります。</td>
    </tr>
    <tr>
        <td>fixed</td>
        <td>表の最初の行が読み込まれた時点で列の幅が決定されるので、表のレンダリングの速度を向上させることができます。</td>
    </tr>
</table>
 

→table-layout: auto;のサンプル
→table-layout: fixed;のサンプル

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

autoとfixedによってテーブル幅の計算が違う

列幅の総計が表全体の幅を超えてしまうと、
table-layout: auto;の場合、列幅は表全体の幅に収まるように自動的に調節が行われ表示されます。
table-layout: fixed;の場合、表全体の幅は列幅の総計にあわせて広げられます。

→autoとfixedによってテーブル幅の計算が違うサンプル