Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 06 Apr, 2021

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

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>

 



Output:

Before applying empty-cells property:

After applying empty-cells property:




My Personal Notes arrow_drop_up
Recommended Articles
Page :