CSS Properties: How to hide border and background on empty cells in a table?

Go to Exercise page

Solution:

HTML Code:

>!DOCTYPE html>>!-- Declares the document type and version of HTML -->
>html>>!-- Begins the HTML document -->
>head>>!-- Contains metadata and links to external resources -->
>title>How to hide border and background on empty cells in a table>/title>>!-- Sets the title of the document -->
>style type="text/css"> /* Starts CSS styling */
 table { /* Targets table elements */
 border-collapse: separate; /* Sets the border-collapse property to separate, ensuring borders are separate */
 empty-cells: hide; /* Sets the empty-cells property to hide, hiding borders and backgrounds on empty cells */
 border-color: #CC64FF; /* Sets the border color of the table */
    }
>/style>>!-- Ends CSS styling -->
>/head>>!-- Ends the head section of the document -->
>body>>!-- Begins the body section of the document -->
>p>>strong>w3resource Tutorial>/strong>>/p>>!-- Paragraph element with strong (bold) text -->
>table border="1">>!-- Begins a table with border attribute set to 1 -->
>tr>>!-- Begins a table row -->
>td>HTML5>/td>>!-- Table data cell with content "HTML5" -->
>td>JavaScript>/td>>!-- Table data cell with content "JavaScript" -->
>td>Python>/td>>!-- Table data cell with content "Python" -->
>/tr>>!-- Ends the first table row -->
>tr>>!-- Begins another table row -->
>td>PHP>/td>>!-- Table data cell with content "PHP" -->
>td>SQL>/td>>!-- Table data cell with content "SQL" -->
>td>>/td>>!-- Empty table data cell -->
>/tr>>!-- Ends the second table row -->
>/table>>!-- Ends the table -->
>/body>>!-- Ends the body section of the document -->
>/html>>!-- Ends the HTML document -->

Explanation:

• This HTML document demonstrates how to hide borders and backgrounds on empty cells in a table using CSS.
• Comments are added to both HTML and CSS to explain each section of the code.
• The CSS >style> block specifies that the table's border-collapse should be separate, meaning each cell will have its own border, and empty-cells should be hidden, which hides the borders and backgrounds of cells with no content.
• This setup ensures that empty cells in the table do not display any visible borders or backgrounds, even if they have a border attribute set in the HTML.

Live Demo:

See the Pen empty-cells-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Yes	Yes	Yes	Yes	Yes

Go to Exercise page