空单元 | empty-cells

empty-cells

该empty-cellsCSS属性指定用户端应该如何渲染周围的边框和背景<table>有没有可见的内容的单元格。此属性时才适用border-collapse的separate。

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

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

语法

该empty-cells属性被指定为下面列出的关键字值之一。

值

show边界和背景像正常区块一样绘制。

hide没有边界或背景绘制。

形式语法

show | hide

例

HTML

<table class="table_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>

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

结果

规范

浏览器兼容性