100% height, nested table, in standard mode

Question

I am trying to fix the display problem that we have with some tables (nested). In short, we show page listing products. Each product is displayed in its own table. And each of them is embedded in a large table for page layout. Unfortunately, some of the inner tables have a bit more content than others, and they end up with different sizes, causing others to not fill the containing cell.

For instance:

<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, a red table fills the blue table, so you see a red table with a blue frame.

However, in standard mode, the internal table does not expand to fill the blue table. Causing the layout was not at all expected.

How can I fix this behavior? I do not want to paint in quirks, as this will lead to the creation of a nightmare for maintenance.

Answer 1

Put style="height: 100%;" into the <td> and <tr> tags. Setting the height to 100% requires each parent to have a specific height.

Answer 2

Instead of setting the height of the external table, set the height <td> and style="height: 100%;" into a nested table.