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

Posted 2023-03-06

【中文标题】Firefox中折叠的表格边框有时会丢失

【英文标题】：Collapsed table borders in firefox sometimes missing

【发布时间】：2014-12-31 20:58:57

【问题描述】：

html 规范允许在表格中使用 multiple 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;

【问题讨论】：

我对题外话结束投票很好奇。这似乎是关于特定编程情况的有效问题。

我遇到了同样的问题。你有没有找到解决方案或解决方法？谢谢

对不起 - 我已经有一段时间没有研究它了。我不记得我是否找到了解决办法。我想我最终决定暂时接受它（不太理想）。

【参考方案1】：

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

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

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

.hide td 
    display: none;