当td为空时奈何表现其边框
发布时间：2020-03-20 09:06:10 所属栏目：编程 来源：站长网
导读：之前总结了下怎样用 css 来实现 table 的 border + bordercolordark + bordercolorlight 的边框明暗结果，然后有网友问我为什么他写了一个相同的 css 样式，但只能在 Opera 下正常看到表格的边框结果， IE 下则什么也没有。 下了个 Opera9 一看，确实云云。
|
之前总结了下怎样用 css 来实现 table 的 border + bordercolordark + bordercolorlight 的边框明暗结果，然后有网友问我为什么他写了一个相同的 css 样式，但只能在 Opera 下正常看到表格的边框结果， IE 下则什么也没有。 下了个 Opera9 一看，确实云云。缘故起因倒也不伟大：由于在 IE 下（ Firefox 好像和 IE 同等）假如某个 td 的内容为空的话，即便你配置了高度和宽度，这个 cell 的边框样式也是不会被表现出来的； Opera 则不管是否有内容与否，一概应用样式来渲染。这个题目刚结业那会就遇到了，其时部分的科长来问我，其后我跟他说：给每个空的 td 加上 就行了。往后每次遇到这个题目，我就完好回收这个简朴粗暴有用的方法来办理了。 但本日卯足了劲研究了几下，从 Jiarry 那知道原本 css 语法是应承我们对这些缺省举动举办改变的：行使 border-collapse:collapse; 和 empty-cells:show; 就可以让消散的边框展现出来。 class="test1": 加 border-collapse:collapse; .test1{ border:1px solid #999999; border-collapse:collapse; width:60% } .test1 td{ border-bottom:1px solid #999999; height:28px; padding-left:6px; } class1 这儿有内容 这儿有内容 class="test2": 加 border-collapse:collapse; 和 empty-cells:show; .test2{ border:1px solid black; border-collapse:collapse; width:60% } .test2 td{ border-bottom:1px solid black; height:28px; padding-left:6px; empty-cells:show; } class2 这儿有内容 这儿有内容 class="test3": 不加 border-collapse:collapse; 和 empty-cells:show; 的环境下 .test3{ border:1px solid #999999; width:60% } .test3 td{ border-bottom:1px solid #999999; height:28px; padding-left:6px; } class3 这儿有内容 这儿有内容 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
