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;
}