table-layout: fixedでページの表示速度を上げる

February 27th, 2012

table © by zoetnet

tableタグ(又はその親要素)にtable-layout: fixedを指定すると、1行目だけを元に表の列の幅を決定し表示します。
デフォルトではtable-layout: autoとなっており、2行目以降も含む、テーブル全体の要素から列の幅を決定します。

後者は表内の要素によってフレキシブルに表示される利点がありますが、行数の多い表だと表示速度が遅くなります。
行数の多い表では、列の幅を決めてtable-layout: fixedを指定するのがよいです。

ネタ元:Use the table-layout CSS property to speed up table rendering