Table column max-width, ellipsis, nowrap : not working in IE 9

Question

Why does the column get correctly cutoff with ellipses at 100px width in Chrome and Firefox but not in IE?

<table style="table-layout:fixed">
    <tr>
        <td style="width:100px;max-width:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap">QWRQWEQWEQWEQWEQWEQWEQWEQWEQWEQWEQWEEQWEQWEQWEQWEQWE</td>
    </tr>
</table>

jsfiddled here

Answer 1

Fixed by adding a div container and applying all the styles to it, instead of the < td > like so:

<table style="table-layout:fixed">
    <tr>
        <td><div style="width:100px;max-width:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap">QWRQWEQWEQWEQWEQWEQWEQWEQWEQWEQWEQWEEQWEQWEQWEQWEQWE</div></td>
    </tr>
</table>