IE では、テーブルの横幅以上のサイズを持つ画像をセルに挿入した場合に、画像をテーブルの横幅に切り詰められてブラウザに出力することができます。なお、Chrome や FireFox では、そのような出力にはなりません。
スポンサーリンク
残念ながら2016年に IE11 で確認したところ画像がテーブルのサイズに切り詰められて出力されることはありませんでした。古い IE のバグだったのかどうかはわかりませんが、このページに書いてある内容は既に正しくありません。記事タイトルを 『 テーブルの横幅を固定する 』 に読み替えてお読みください。
テーブルの横幅は width 属性で指定することができますが、例えばセル内にテーブルの横幅よりも大きな画像があると、テーブルにはその画像の横幅が適用され、table タグの width 属性で指定した横幅は無視されます。以下がサンプルになります。
<html>
<body>
<table width="100px">
<tr>
<td><img width="300px" src="table-layout_fixed.png" /></td>
</tr>
</table>
</body>
<html>
出力結果
テーブルの横幅は画像のサイズに調整される
テーブルの横幅を固定する table-layout: fixed
上記の結果では、横幅 300px の画像がすべて表示され、table タグに指定した横幅 ( 100px ) は無視されました。テーブルの width 属性で指定した横幅を強制的に適用するには table-layout 属性に fixed を指定すると幅が固定されます。
<html>
<body>
<table width="100px" style="table-layout: fixed;">
<tr>
<td><img width="300px" src="table-layout_fixed.png" /></td>
</tr>
</table>
</body>
<html>
出力結果
テーブルの幅を固定する
IE では横幅 300px の画像は、table タグに指定した横幅 ( 100px ) に切り詰められて表示されます。 なお、その分表示速度は速くなります。
ただし、IE以外のブラウザでは、テーブルは指定した幅に固定されますが、セル内の画像はテーブルの幅をはみ出して表示されてしまいます。
画像サイズの指定がテーブルのサイズより優先されます。