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

Last Updated : 10 May, 2023

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: The empty-cells property of CSS is used to hide the borders and backgrounds on empty cells. To hide the borders and backgrounds on empty cells, we will set the empty-cells value to hide that will hide the borders and backgrounds of empty cells.

Syntax:

empty-cells: hide;

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .gfg {
            font-size: 50px;
            empty-cells: hide;
        }
 
        td,
        th {
            background-color: rgb(0, 168, 0);
            border: solid 1px red;
        }
    </style>
</head>
 
<body>
    <table class="gfg" border="1">
        <tr>
            <td>Name</td>
            <td>Marks</td>
        </tr>
 
        <tr>
            <td>Nikhil</td>
            <td>200</td>
        </tr>
 
        <tr>
            <td>Vijay</td>
            <td></td>
        </tr>
    </table>
</body>
</html>