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 |