empty-cells

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

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

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

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

初始值show
适用元素table-cell elements
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

Result

规范

Specification Status Comment
CSS Level 2 (Revision 1)
empty-cells
Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
empty-cellsChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 4Safari Full support 1.2WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown