100% height, nested table, in standards mode

Question

I am trying to fix a display issue we are having with some tables (nested). In short, we show a page listing products. Each product is displayed in it's own table. And each of these is nested in a larger table to layout the page. Unfortunately, some of the inner tables have slightly more content than others and they end up being different sizes, causing others not to fill the containing cell.

For example:

<table style="height:500px; background:blue;">
    <tr>
        <td style="vertical-align: top">
            <table style="background:red; height: 100%;">
                <tr>
                    <td>hello</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

In quirks mode, the red table, fills the blue table, so you basically see a red table, with a blue border.

In standards mode however, the inner table does not expand to fill the blue table. Causing the layout to be not at all as anticipated.

How can I fix this behavior? I don't want to render in quirks, as that will end up creating a maintenance nightmare.

Answer 1

Put style="height: 100%;" on the <td> and <tr> tags. Setting height to 100% needs every parent to have a defined height.