固定レイアウト表で列の幅が小さくなる

症状

固定レイアウト表（table-layout:fixed;）で、以下の問題が発生する。

列の幅を%単位の値で指定した表でその合計値が100%を超えるとき、列の後方にあるセルの実際の幅が小さくなることがある。セルの幅が0になり内容物が見えなくなることもある。

1つの表に幅を%単位の値で指定した列と長さの値で指定した列が混在する場合、幅を%単位の値で指定した列の実際の幅が小さくなることがある。セルの幅が0になり内容物が見えなくなることもある。

列の幅を%単位の値で指定したとき、列の幅は表の幅に対する%値ではなく表の幅からボーダーの幅やセル間の幅を差し引いた量に対する%値になる。

例示

<table border="2" style="width:10em; table-layout:fixed;">
<tr>
<td style="width:80%;">A列</td>
<td style="width:40%;">B列</td>
<td style="width:20%;">C列</td>
</tr>
</table>
<table border="2" style="width:10em; table-layout:fixed;">
<tr>
<td style="width:50%;">A列</td>
<td style="width:6em;">B列</td>
<td style="width:6em;">C列</td>
</tr>
</table>

A列

B列

C列

A列

B列

C列

1番目の表は列幅の合計が100%を超える場合、2番目の表は列幅の指定値に%単位の値と長さの値が混在する場合の例です。

スクリーンショット

WinIE6.0標準モード

補足

以下は例示の各表の問題点です（ここでは幅の算出においてボーダーの幅やセル間の距離は考えていません）。

1番目の表は列幅の合計が表幅より大きいにもかかわらず、表幅の指定値を最終的な表全体の幅として用いています。従って各列の幅は、
- 1列目：表幅の80%を列幅とする
- 2列目：表幅の40%を使用したいが実際は20%分しか残っていないため、表幅の20%を列幅とする
- 3列目：表幅に残りがないため列幅が0になってしまう
となります。
2番目の表は表全体の幅が12emです。これは2列目の幅の指定値と3列目の幅の指定値の合計であり、1列目の幅の指定値を考慮していません。例えば、1列目の幅は表幅の指定値の50%＝5emとするなどの処理が必要と考えられます。

セル要素のoverflowプロパティにvisible値を明示することで内容物が見えない問題は回避することができます。ただし、隣のセルの内容物と重なってしまう場合があります。また、表要素のボックスからはみ出した部分は表示できません（『overflowへの対応が不完全な要素』）。