td为空时显示其边框的方法

　　我们都知道css实现 table 的 border + bordercolordark + bordercolorlight 的边框明暗效果，但是当td为空时border边框样式是不被执行的，那么我们应该怎么办呢?现在我们就去看看td为空时显示其边框的方法。

　　大家在学习了如何用 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;

　　}

　　通过以上内容我们知道原来css语法是允许我们对这些缺省行为进行改变的，以后遇到这个问题就可以使用 border-collapse:collapse; 和 empty-cells:show这个简单粗暴有效的方式来解决了。