Firefox中折叠的表格边框有时会丢失

Question

HTML规范允许表中包含多个 tbody元素。我有这样的情况，Firefox似乎不想处理塌陷的边框。

http://jsfiddle.net/hunvjrp4/

在Chrome 37中，第二个表格上的边框可以正确显示，但在Firefox 33或Internet Explorer 11中，边框不会太热。

基本上，看起来是否存在任何tbody包含（仅？）隐藏内容的内容，那么它将无法正确显示整个表格的边框。

是否有一种解决方法可以正确绘制边界？

我尝试过不折叠边框，这似乎可行，但是使此特定表看起来与网站上的其他表不同。

上面链接的小提琴的代码示例：

With multiple `tbody` elements:
<table class="mainContent">
    <thead><tr><th>hi</th><th>there</th></tr></thead>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
</table>
<br />
<br />

如果任何tbody元素包含display: none一行，那么事情就会出错：

<table class="mainContent">
    <thead><tr><th>hi</th><th>there</th></tr></thead>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
    <tbody><tr class="hide"><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
</table>

以及样式：

table {
    border-collapse: collapse;
}
table tr td {
    border: solid 1px #ccc;
    padding: 4px;
}
.hide {
    display: none;
}

Answer 1

这是一种非常奇怪的行为，在我看来可能是一个错误。

我尝试用一​​些解决方法来解决它，第一个成功的方法是将.hideclass 应用到tbodytag 而不是 on TR，但后来我认为你可能有某种原因将它应用到表行上，所以我转向“后代选择器”技术。

看看这个更新的例子。唯一的区别是 display:none 应用于TD，同时继续在 html 中设置.hideclass TR。

.hide td {
    display: none;
}