Question

HTML规范允许表格中包含multiple tbody个元素。我有一个类似的情况，Firefox似乎并不想处理折叠的边界。

第二张桌子上的边框在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

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

我试图用一些解决方法来解决它，第一个成功的方法是将.hide类应用于tbody标记而不是TR，但后来我认为可能你有一些原因将它应用于表格行，所以我转向“后代选择器”技术。

Look at this updated example。唯一的区别是display：none已应用于TD，同时继续在html中将.hide类设置为TR。

.hide td {
    display: none;
}

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

1 个答案: