以前小结了下怎样用 css 来完成 table 的 border bordercolordark bordercolorlight 的边框明暗交界线实际效果,随后有网民跟我说为何他写了一个相近的 css 样式 ,但只有在 Opera 下一切正常见到报表的边框实际效果, IE 下则什么也没有。
  下了个 Opera9 一看,的确这般 。缘故倒也不繁杂:由于在 IE 下( Firefox 好像和 IE 一致)假如某一 td 的内容为空得话 ,就算你设定了高宽比和总宽 ,这一 cell 的边框样式也是不容易被显示信息出去的; Opera 则无论是不是有内容是否,一概运用样式来3D渲染。这个问题刚大学毕业那会就遇到了,那时候单位的小编来跟我说 ,之后我跟他说道:给每一个空的 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 这里有内容
这里有内容