table要素のセル幅を均等にする

2008年12月 8日 19:50

table要素のセル幅を、Javascript等を使わずCSSのみで実現する方法です。

サンプル

table{
width:***px;（%指定も可）
table-layout:fixed;
}

table要素は、まずtable要素の中身全てを読み込み、それからセルの横幅等を計算して画面上へ描画します。
「table-layout」プロパティは、1行目が読み込まれた時点で各セルの横幅を決定し、画面上へと描画するプロパティです。

「fixed」を指定した場合、次の順序に従って横幅が計算されます。

1. 横幅が定められている列要素の幅を確保します。
2. 横幅が定められていないものの、第一行目のセルにて横幅が定められている列要素の幅を確保します。
3. 残りの列については、余った幅を等分して得られた幅が与えられます。

つまり、横幅が指定されたセルの場合はその幅となり、それ以外は余った幅で均等になるということです。
横幅が全く指定されていない場合は、全てのセル幅が均等になるというわけです。

なお「table-layout」を使用すると、table要素の描画が早くなるらしい。

• 
• CSS
• Comments(0)
• Trackbacks(0)