表格的最小高度而不影响 Firefox 中的 thead 和 tbody

Question

我有一个 table，我想设置一个 min-height。
据我所知，min-height 不适用于 table，事实上，您必须在 table 上设置 height。

这很好，除了当我在 table 上设置 height 时，它有 thead、tbody 和 tfoot，全部一行，三个部分中的每一个的高度仅在 Firefox 中设置为总高度的三分之一，这是我不想要的。
Chrome 和 IE（测试回 IE8）都保持 thead 和 tfoot 的原始高度，只拉伸 tbody.

我希望 thead 和 tfoot 保持原来的高度，然后 tbody 也只在 Firefox 中拉伸 height 的剩余部分（只是就像在 Chrome 和 IE 中一样。

在 Firefox 中有什么方法可以做到这一点吗？
谢谢。

编辑:

这是我想要的：

这是我在 Firefox 中实际得到的：

Answer 1

作为解决方法，您可以将 height 值分配给 thead 和 tfoot 中的 th and/or td，请参阅下面的演示：

table {
    height: 200px;
    width: 100%;
}
thead {
    background: crimson;
}
tbody {
    background: orange;
}
tfoot {
    background: green;
}
thead th, thead td, tfoot th, tfoot td {
    height: 0; /*or any height*/
}

<table>
    <thead>
        <tr>
            <th>Header content 1</th>
            <th>Header content 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Body content 1</td>
            <td>Body content 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer content 1</td>
            <td>Footer content 2</td>
        </tr>
    </tfoot>
</table>

表格的最小高度而不影响 Firefox 中的 thead 和 tbody

min-height for tables without affecting thead and tbody in Firefox

html

css

firefox

height

tablelayout