CSS empty-cells Property Tutorial

In this section, we will learn what the empty-cells property is and how to use it in CSS.

Click here to run the example of empty-cells property.

CSS empty-cells Property Definition and Usage

Sometimes one or more cells in a table don’t have any content inside them. In situations like this, we might want to hide those empty cells!

CSS provides a property called `empty-cells` by which we can hide these empty cells.

Note: you can apply this property on the <table> element.

CSS empty-cells Property Syntax

empty-cells: show|hide|initial|inherit;

CSS empty-cells Property Value

CSS provides a property called `empty-cells` by which we can hide these empty cells.

There are two values that can be set for this property:

  • hide: using this value, any empty cell within a table will be hidden.
  • show: This is the default value and using this value, empty cells in a table will be visible.

The two global values, “initial” and “inherit” can also be used as the value for this property.

Example: empty-cells property in CSS

See the Pen empty-cells property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS empty-cells Property Work?

Note: If you set the value for border-collapse property to “collapse”, then using the value “hide” for the property empty-cells has no effect.

Leave a Reply