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.
