Empty-cells - CSS Property

Syntax diagram of empty-cells.

Description of the empty-cells property.

The empty-cells property sets whether empty cells in a table should be displayed. This also applies to the cell's border and background.

A cell is considered empty if it only contains spaces, unless the white-space property is set to pre, pre-line, or pre-wrap for that cell, in which case a space counts as content. On the other hand, a non-breaking space ( ) isn't considered blank and is enough to "fill" the cell.

Warning! empty-cells only has an effect if the border-collapse property does not have the value collapse (see border-collapse).

Values for empty-cells.

• empty-cells: show;

  Default value. Empty cells, their borders and their background are displayed the same way as cells with content.

  	Monday	Tuesday	Wednesday
  Lunch	Ratatouille	Pasta	Salad
  Dinner	Leftovers		Soup

• empty-cells: hide;

  Empty cells are not shown, along with their borders or background.

  	Monday	Tuesday	Wednesday
  Lunch	Ratatouille	Pasta	Salad
  Dinner	Leftovers		Soup

• empty-cells: initial; (show) empty-cells: inherit; empty-cells: revert; empty-cells: revert-layer; empty-cells: revert-rule; empty-cells: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the empty-cells property.

The property empty-cells can be animated. Of course, the transition from one value to another will be abrupt since these are not numerical values. The animation will show as a blinking of the empty cells, provided they have a border and/or a non-transparent background.

Access the empty-cells property via a program

Change the value of empty-cells in JavaScript.

To change the value of a property, JavaScript recognizes two syntaxes, both of which are shown in the example.

let el = document.getElementById('id'); el.style['empty-cells'] = 'hide'; // or let el = document.getElementById('id'); el.style.emptyCells = 'hide';

Read the value of empty-cells in Javascript.

This code example retrieves the value of empty-cells if it has been set in the HTML code, via the style attribute of the element. Values set through a CSS selector are not retrieved (see the following code for that, which returns the computed value).

let el = document.getElementById('id'); let value = el.style['empty-cells']; // or let el = document.getElementById('id'); let value = el.style.emptyCells;

Read the computed value of empty-cells in Javascript.

The computed value is the one that results from evaluating the cascade of inheritances. It can be the value set directly (via a CSS selector or the style attribute in the HTML code), an inherited value, or the initial value of the property, which is show for empty-cells.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('empty-cells');

Read or change the value of the empty-cells property with JQuery.

Like JavaScript, jQuery accepts the property name written either in kebab-case (a dash to separate words) or in camel-case (a capital letter to separate words).


// Read the value:
$('#id').prop('empty-cells');
// Write the value:
$('#id').prop('empty-cells', 'hide');
$('#id').prop('{empty-cells': 'hide'});


Read the computed value of the empty-cells property with JQuery.

let value = $('#id').css('empty-cells');

Other examples.

Other examples of Javascript and JQuery code are given on the page Javascript and CSS.

Test it yourself.

The buttons below apply the entered value to the empty-cells property and then display either the value as it was applied or the computed value. The second option lets you see how the value of empty-cells is stored (serialized), but in the case of empty-cells, it doesn't make a difference, unless you enter a value other than show or hide.

Simulator.

This table contains two empty cells. Notice that the border and background of the empty cells disappear when empty-cells has the value hide, revealing the gray background of the table.

Browsers compatibility with empty-cells.

1

empty-cells
property

Estimated overall support.

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Samsung Internet

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the empty-cells property.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

  Regarding empty-cells Introduction of the empty-cells property (CSS version 2.xx).
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Table Module Level 3

  This specification module defines a table-based layout system, optimized for the rendering of tabular data. In this layout model, each cell is assigned to an intersection between a set of consecutive rows and a set of consecutive columns, which are themselves generated from the structure of the table and sized according to their content.

  Regarding empty-cells No change to the empty-cells property.
  

  October 25, 2016

  Working Draft.

  

  

  

See also, about the tables.

The W3C specification "CSS Table Module" gathers the definitions specifically concerning tables. There are actually quite a few, but more general properties can also apply to tables: dimensions, margins, etc.

Properties: