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

症状

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

  • 列の幅を%単位の値で指定した表でその合計値が100%を超えるとき、列の後方にあるセルの実際の幅が小さくなることがある。セルの幅が0になり内容物が見えなくなることもある。
  • 1つの表に幅を%単位の値で指定した列と長さの値で指定した列が混在する場合、幅を%単位の値で指定した列の実際の幅が小さくなることがある。セルの幅が0になり内容物が見えなくなることもある。
  • 列の幅を%単位の値で指定したとき、列の幅は表の幅に対する%値ではなく表の幅からボーダーの幅やセル間の幅を差し引いた量に対する%値になる。

※Opera6では列の幅が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番目の表は列幅の指定値に%単位の値と長さの値が混在する場合の例です。

スクリーンショット

関連記事

スポンサーリンク

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る