css empty-cells 属性

CSS empty-cells 属性

简介

empty-cells 属性控制表格中空单元格的显示方式。它可以取以下值：

• show: 显示空单元格
• hide: 隐藏空单元格
• inherit: 继承父元素的 empty-cells 值

语法

table {
  empty-cells: show | hide | inherit;
}

用法

empty-cells 属性通常用于控制表格中空单元格的显示方式。例如，如果表格中有许多空单元格，则可以将其隐藏以使表格更紧凑。

要隐藏空单元格，可以使用以下代码：

table {
  empty-cells: hide;
}

要显示空单元格，可以使用以下代码：

table {
  empty-cells: show;
}

浏览器支持

empty-cells 属性在所有现代浏览器中都得到支持。

示例

以下示例演示如何使用 empty-cells 属性来控制表格中空单元格的显示方式：

// www.javascriptcn.com code example
<table>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
    <td></td>
  </tr>
  <tr>
    <td>数据 3</td>
    <td></td>
    <td>数据 5</td>
  </tr>
</table>

/* 隐藏空单元格 */
table {
  empty-cells: hide;
}

输出：

// www.javascriptcn.com code example
<table>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
  <tr>
    <td>数据 3</td>
    <td>数据 5</td>
  </tr>
</table>

/* 显示空单元格 */
table {
  empty-cells: show;
}

输出：

// www.javascriptcn.com code example
<table>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
    <td></td>
  </tr>
  <tr>
    <td>数据 3</td>
    <td></td>
    <td>数据 5</td>
  </tr>
</table>

注意事项

• empty-cells 属性只适用于表格中的空单元格。它不适用于包含文本或其他内容的单元格。
• 如果表格中有一个单元格具有 colspan 或 rowspan 属性，则该单元格不会被视为空单元格。
• empty-cells 属性不会影响表格的布局。它只影响空单元格的显示方式。