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中折叠的表格边框有时会丢失所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)