html - Why doesn't IE respect table width with fluid image child

Question

Consider the following code:

HTML:

<table>
    <tr>
       <td><img src="http://watduck.jpg.to" /></td>
    </tr>
</table>

CSS:

table { width: 10% }
img { max-width: 100% }

The image should obviously be a 10th the width of the window, which is exactly what it is in every browser except IE, where it simply falls back to its original size.

However, consider this:

HTML:

<div><img src="http://watduck.jpg.to" /></div>

CSS:

div { width: 10% }
img { max-width: 100% }

which IE does get right, and displays at a 10th of the window width.

---

So, here's the question: what causes this behavior, and what could possibly be done to force IE to respect the table's width?

Tested in IE8 & IE9 (don't care about IE7 and below).

Answer 1

If you specify table-layout: fixed; in the table css it works.

There seems to be some contradictory terminology in the standard regarding table layouts. In particular, table-layout: auto; says this:

The column width is set by the widest unbreakable content in the cells

Since the images content is unbreakable, it sets the width of the cell to the size of the content. The max-width seems to be overriden by it.