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

在 quirks 模式下，红色表格填满了蓝色表格，所以您基本上看到的是带有蓝色边框的红色表格。

然而，在标准模式下，内表不会扩展以填充蓝色表。导致布局完全不符合预期。

我该如何解决这个问题？我不想呈现怪癖，因为这最终会造成维护噩梦。

Answer 1

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