How to Hide Border and Background on Empty Cells in a Table using CSS?

In this article, we will learn how to hide borders and backgrounds on empty cells in a table using CSS. The empty-cells property of CSS is used to hide the borders and backgrounds on empty cells.

Approach To Hide Border and Background on Empty Cells In A Table

• The empty-cells: hide; style of the .gfg class hides any cells in the table without content, so they don’t appear visibly.
• The table cells have a green background with a red border, and the text is larger (50px) for clear visibility.

Output

Before applying empty-cells property

👁 Image

After applying empty-cells property

👁 Image