标准模式下，100％高度，嵌套表格

Question

我正在尝试修复一些表格（嵌套）的显示问题。简而言之，我们展示了一个列出产品的页面。每个产品都显示在自己的表中。并且每个都嵌套在一个更大的表中以布局页面。不幸的是，一些内部表的内容比其他内容略多，最终它们的大小不同，导致其他内容不能填充包含单元格。

例如：

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

在怪癖模式下，红色表填充蓝色表格，所以你基本上看到一个带有蓝色边框的红色表格。

但是，在标准模式下，内部表格不会展开以填充蓝色表格。导致布局完全没有预期。

如何解决此问题？我不想渲染怪癖，因为这最终会造成维护噩梦。

Answer 1

将style="height: 100%;"放在<td>和<tr>标记上。将高度设置为100％需要每个父级具有定义的高度。

Answer 2

不是设置外部表的高度，而是在嵌套表上设置<td>和style="height: 100%;"的高度。