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).

Zonnya

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.

Caseation

Thanks, that did it. Any idea why all other modern browsers agree on respecting max-width, whereas IE seems to ignore it? – Zonnya

@JosephSilber - Are you rendering in compatibility mode? Does your real page have a proper doctype? – Caseation

@MystereMan - Sure does. It seems that for some reason IE is doing this intentionally. – Zonnya

I don't know have I been living under a rock? I've been doing PSD to HTML/CSS since 2003 or even before. I always skipped tables on IE as (this cannot be fixed) Surprisingly this came to the rescue. Awesome thanks so much! – Newsprint

This didn't work for me alone - I had to add width: 100% to the parent table as well. – Swint