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

【问题标题】：min-height for tables without affecting thead and tbody in Firefox表格的最小高度而不影响 Firefox 中的 thead 和 tbody
【发布时间】：2015-04-03 01:58:38
【问题描述】：

我有一张表，我想在其上设置 min-height。
但据我所知，min-height 不适用于桌子，事实上，您必须在桌子上设置 height。

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

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

有没有办法在 Firefox 中做到这一点？
谢谢。

编辑：

这就是我想要的：

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

【问题讨论】：

标签： html css firefox height tablelayout

【解决方案1】：

作为一种解决方法，您可以将height 值分配给th 和/或td 内thead 和tfoot，请参见下面的演示：

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>

【讨论】：

是的，（不情愿地）我刚刚得出了同样的结论。我讨厌在表的页眉和页脚中为ths 和tds 设置一个高度，但无论如何，它就是这样，现在在所有浏览器中看起来都很好。很烦人，但我猜这就是这些天在网络上的方式。非常感谢。
@HartleySan :P th 和 td 上的高度值真的像 min-height 一样工作，应该没有任何问题。