之前总结了下如何用 css 来实现 table 的 border + bordercolordark + bordercolorlight 的边框明暗效果，然后有网友问我为什么他写了一个类似的 css 样式，但只能在 Opera 下正常看到表格的边框效果， IE 下则什么也没有。 下了个 Opera9 一看，确实如此。原因倒也不复
在CSS布局中，当表格（table）的单元格（td）为空时，边框的显示问题经常成为开发者遇到的一个挑战。特别是在Internet Explorer (IE)浏览器中，如果一个td没有内容，即使指定了高度和宽度，边框也不会显示。这是因为IE（以及Firefox）遵循一种默认的行为，即对于空的单元格，它们的边框不会呈现。然而，Opera浏览器对此有不同的处理方式，它会无视单元格是否为空，都会应用边框样式。
为了解决这个问题，我们可以利用CSS的两个属性`border-collapse`和`empty-cells`。`border-collapse`属性用于控制表格单元格之间的边框合并行为，而`empty-cells`属性则决定是否显示空单元格的边框。
1. `border-collapse: collapse;`
这个属性将表格的边框合并为单一的边框，使得边框看起来更平滑。当设置为`collapse`时，可以解决IE和Firefox中的边框不显示问题。但是，仅仅设置`border-collapse`并不能解决所有问题，因为它只是控制边框合并，而不是控制空单元格的边框显示。
2. `empty-cells: show;`
这个属性是关键，它用于控制空单元格的边框显示。默认情况下，`empty-cells`的值是`hide`，意味着空单元格的边框不会显示。将它设置为`show`，就能确保即使单元格为空，也会显示边框。
下面是一些示例代码，展示了如何应用这两个属性：
```css
.test1 {
border: 1px solid #999999;
border-collapse: collapse;
width: 60%;
}
.test1 td {
border-bottom: 1px solid #999999;
height: 28px;
padding-left: 6px;
}
.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;
}
.test3 {
border: 1px solid #999999;
width: 60%;
}
.test3 td {
border-bottom: 1px solid #999999;
height: 28px;
padding-left: 6px;
}
```
在这段代码中，`.test1`只使用了`border-collapse: collapse;`，`.test2`同时使用了`border-collapse: collapse;`和`empty-cells: show;`，而`.test3`没有使用这两个属性。这将展示在不同场景下的边框显示效果。
通过这样的CSS设置，我们可以在各种浏览器中统一表格边框的显示，无论单元格是否为空。这对于跨浏览器兼容性是非常重要的，确保用户在任何环境下都能获得一致的视觉体验。因此，理解和正确使用`border-collapse`和`empty-cells`是CSS布局中不可或缺的一部分，特别是当处理包含空单元格的表格时。
