empty-cells

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您的旅程各个阶段提供云产品。 立即开始使用 $200 免费信用额度!

CSS 中的 empty-cells 属性用于选择空表格单元格,以指定是否在这些单元格上显示边框和背景。 换句话说,它告诉浏览器是否在表格单元格周围绘制边框或填充背景,即使该单元格不包含任何内容。 这有点像对空表格单元格应用 visibility 属性。

table {
  empty-cells: show;
}

empty-cells 属性有两个主要值

  • show:在空单元格上显示边框和背景。
  • hide:在空单元格上不显示边框或背景。

以下全局值也被接受

  • inherit:继承父元素的属性值。
  • initial:使用该属性的定义默认值。
  • unset:将属性重置为其继承值。

何时使用它

这是一个有趣的属性,因为它让 CSS 能够检查 HTML 标记中表格内部的内容并相应地做出反应。 我们通常不认为 CSS 是一种动态语言,但这是一个它非常接近的情况。

empty-cells 的一个很好的用例可能是您可能不知道表格是否包含空数据点,并且您决定隐藏它们。 表格过去是网页布局的默认方式,因此它对于在使用表格进行演示或元素包含 display: table 属性时显示和隐藏元素来说可能是一个有用的工具。

演示

查看 CodePen 上 CSS-Tricks 的作品 mPLVzB (@css-tricks) on CodePen.

相关

更多信息

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
1.0 1.2 1.1 4.0 8.0 1.0 3.1