Question

I have a table defined as follows in HTML:

<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
    <tr style="font-size:small;">
        <th colspan="2">Name</th>
        <th>Abbr.</th>
        <th style="width:100%;">&nbsp;</th>
    </tr>
    <tr>
        <td style="padding:5px;text-align:centered;width:48px;">
            <img src="..." style="max-width:32px" />
        </td>
        <td style="text-align:left;white-space:nowrap;">Some Text</td>
        <td>ABC</td>
        <td>&nbsp;</td>
    </tr>
</table>

Everything renders fine when the image size is 32px or smaller. When the image is larger, it a resized to 32px as expected but the table cell remains at the original width. For instance, if the original image is 100×100, the image is resized to 32×32 but the table cell is displayed with a width of 100px.

What am I missing so that the table cell will render with the correct width regardless of the original size of the image?

UPDATE
I updated the original markup to show the full table layout.

Answer 1

I can reproduce your problem in only IE8: http://jsfiddle.net/Dtc5m/

To fix it in IE8, you can add table-layout: fixed.

See: http://jsfiddle.net/Dtc5m/1/

---

After further discussion in the comments, the accepted solution turned out to be:

wrap the img in a div, and give the
div a width equal to the max-width of
the img. See: http://jsfiddle.net/Dtc5m/6