empty-cells

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS 中 empty-cells 属性定义了用户端 user agent 应该怎么来渲染表格 <table> 中没有可见内容的单元格的边框和背景。

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

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

只有当 border-collapse 属性值是 separate 时,才会生效。

初始值show
适用元素表格单元格元素
是否是继承属性
计算值as specified
动画类型离散值

语法

empty-cells 的属性值必须是以下取值中的一个。

取值

show

边框和背景正常渲染。与普通元素一样。

hide

边框和背景被隐藏。

语法形式

empty-cells = 
show |
hide

示例

HTML

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

css
.table_1 {
  empty-cells: show;
}

.table_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}

结果

规范

Specification
Cascading Style Sheets Level 2
# empty-cells

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
empty-cells

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support