html – firefox中折叠的表格边框有时会丢失

概述HTML规范允许表中的 multiple个tbody元素.我有一个类似的情况,Firefox似乎不想处理折叠的边框. http://jsfiddle.net/hunvjrp4/ 第二个表格中的边框在Chrome 37中正确显示,但在Firefox 33或Internet Explorer 11中不能显示. 基本上,看起来如果有任何tbody包含(仅？)隐藏内容,那么它无法正确地为整个表呈现边框. HTML规范允许表中的 multiple个tbody元素.我有一个类似的情况,firefox似乎不想处理折叠的边框.

http://jsfiddle.net/hunvjrp4/

第二个表格中的边框在Chrome 37中正确显示,但在firefox 33或Internet Explorer 11中不能显示.

基本上,看起来如果有任何tbody包含(仅？)隐藏内容,那么它无法正确地为整个表呈现边框.

是否有解决方法来正确绘制边框？

我试过没有折叠边框,这似乎有效,但让这个特定的表看起来与网站上的其他表不同.

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

With multiple `tbody` elements:<table >    <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元素包含单个显示：none行则会出现问题：

<table >    <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>

和风格：

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

解决方法 这是一种非常奇怪的行为,在我看来可能是一个BUG.

我尝试用一​​些解决方法解决它,第一个成功的方法是将.hIDe类应用于tbody标签而不是TR,但后来我认为可能你有理由将它应用于表行,所以我转向“后代选择器“技术.

Look at this updated example.唯一的区别是显示：无应用于TD,同时继续在.HTML中将.hIDe类设置为TR.

.hIDe td {    display: none;}

总结

以上是内存溢出为你收集整理的html – firefox中折叠的表格边框有时会丢失全部内容，希望文章能够帮你解决html – firefox中折叠的表格边框有时会丢失所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。