Child element not inheriting height from parent table cell in IE

Question

I have the following scenario, where I have a table that is to take up 100% height:

<table class="table1">
    <tr>
        <td class="fixed">
            Fixed height row
        </td>
    </tr>
    <tr>
        <td>
            <table class="table2"> 
                <tr>
                    <td>
                        Content
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Inside the table cell I have some other element that I want to fill the parent table cell height (100%).

This works in IE Quirks mode (which the original application was written against), as well as Chrome and Safari. I haven't checked other browsers.

However it doesn't seem to work in any version of IE in standards mode. It seems that the child element does not implicitly inherit the height of its parent table cell.

Is this an IE bug, and what is the best way to work around it?

Additional Information:

This scenario is widespread throughout an enormous legacy enterprise application that we are trying to make standards compliant. Therefore I'm looking for a solution that involves the least amount of changes possible to the markup.

Answer 1

This behaviour is evident in both IE and Firefox.

The latter being reported as a bug since 1999.

Answer 2

Kindly make positioned... i.e parent and child position et to :relative and absolute respectively

Answer 3

Give your table cells a height of 100%.

td{height:100%;}

See updated fiddle in IE http://jsfiddle.net/gqLUw/11/