CSS - empty-cells

The empty-cells CSS property specifies how user agents should render borders and backgrounds around cells that have no visible content.

Examples

HTML

Copy Code

<table class="table_1">
    <tr>
        <td>Moe</td>
        <td>Larry</td>
    </tr>
    <tr>
        <td>Curly</td>
        <td></td>
    </tr>
</table>
<table class="table_2">
    <tr>
        <td>Moe</td>
        <td>Larry</td>
    </tr>
    <tr>
        <td>Curly</td>
        <td></td>
    </tr>
</table>

CSS

Copy Code

.table_1 {
  empty-cells: show;</code>
}
<code class="language-css">.table_2 { 
  empty-cells: hide;</code> 
}

<code id="actual-css-code" class="cm-s-default">td, th {
  border: 1px solid #999;
  padding: 0.5rem;
}

Result

Syntax

CSS

Copy Code

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

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

Values

show: Is a keyword indicating that borders and backgrounds should be drawn like in normal cells.
hide: Is a keyword indicating that no borders or backgrounds should be drawn.

Formal syntax

CSS

Copy Code

show <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> hide

Description

The empty-cells CSS property specifies how user agents should render borders and backgrounds around cells that have no visible content.

Initial value	`show`
Applies to	table-cell elements
Inherited	yes
Media	visual
Computed value	as specified
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	8.0	4.0	1.2

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1	1.0 (1.0)	8	6	3.1

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/empty-cells

CSS CSS Property CSS Tables NeedsMobileBrowserCompatibility Reference