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
的表格生效。