empty-cells

CSS中 empty-cells 属性定义了用户端user agent应该怎么来渲染表格 <table> 中没有可见内容的单元格的边框和背景。

示例

/* keyword values */
empty-cells: show;
empty-cells: hide;

/* global values */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;

浏览器支持

IE8以上版本的浏览器都支持 empty-cells

语法：

empty-cells ： show | hide

注意 ：只有当 border-collapse 属性值是 separate 时，才会生效。

取值：

• show ：指定当表格的单元格无内容时，显示该单元格的边框。
• hide ：指定当表格的单元格无内容时，隐藏该单元格的边框。

说明：

设置或检索当表格的单元格无内容时，是否显示该单元格的边框。

• IE7及以下浏览器中默认隐藏无内容的单元格边框，要想使其获得与 show 参数值相同的效果，可以变相给该空单元格加个占位且不可见的元素，例如 全角空格 或   等等。
• 只有当表格边框独立（即 border-collapse 属性等于 separate 时）此属性才起作用。
• 对应的脚本特性为 emptyCells 。

例子

//HTML

<table class="table_1">
  <tr>
    <td>moe</td>
    <td>larry</td>
  </tr>
  <tr>
    <td>curly</td>
    <td></td>
  </tr>
</table>
<br>
<table class="table_2">
  <tr>
    <td>moe</td>
    <td>larry</td>
  </tr>
  <tr>
    <td>curly</td>
    <td></td>
  </tr>
</table>

//CSS
.table_1 {
  empty-cells: show;
}

.table_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}