CSS empty-cells 属性
CSS empty-cells 属性
CSS empty-cells 属性用于设置表格空单元格的显示方式。它有两个可选值：show 和 hide。
可选值
show：显示空单元格的边框和背景色（默认值）。hide：隐藏空单元格的边框和背景。
语法
table {
empty-cells: show|hide;
}
示例
显示空单元格
<table>
<tr>
<td>Apple</td>
<td>Banana</td>
<td></td>
<td>Orange</td>
</tr>
<tr>
<td>Pear</td>
<td>Pineapple</td>
<td></td>
<td>Watermelon</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
empty-cells: show;
}
td {
border: 1px solid black;
padding: 10px;
}
</style>
效果图：
隐藏空单元格
<table>
<tr>
<td>Apple</td>
<td>Banana</td>
<td></td>
<td>Orange</td>
</tr>
<tr>
<td>Pear</td>
<td>Pineapple</td>
<td></td>
<td>Watermelon</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
empty-cells: hide;
}
td {
border: 1px solid black;
padding: 10px;
}
</style>
效果图：
注意事项
empty-cells属性只对border-collapse属性值为collapse的表格生效。- 对于
show值，只有当表格有边框或有背景色时，空单元格才会显示出来。
浏览器兼容性
| Chrome | Firefox | Safari | Opera | Edge | IE |
|---|---|---|---|---|---|
| 1.0 | 1.0 | 1.0 | 4.0 | 12.0 | 8.0 |
总结
CSS empty-cells 属性可以帮助开发者调整表格的显示方式，特别是在空单元格过多的情况下，可以隐藏空单元格的边框和背景，提高表格的美观性。需要注意的是，empty-cells 属性只对部分浏览器支持，同时只对 border-collapse 属性值为 collapse 的表格生效。