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

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

Last Updated : 21 Nov, 2024

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.

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

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

N

nikhilchhipa9

Improve

Article Tags :

Similar Reads

How to Change the Background Color of Table using CSS?

Changing the background color of a table using CSS can help improve the visual appearance of a website or web application. we will learn how to change the background color of the table using CSS with different approaches.These are the following approaches:Table of Content Using Inline CSSUsing Inter

How to create a hidden border using CSS properties ?

In this article, we will learn how to create a hidden border using CSS properties. In the following examples, both inline styling and style definition is used in the head section to define the hidden border. Approach: We will use two headings in which one will show the border color and the other wil

How to Create Header Cell in a Table using HTML?

A header cell in a table made with <th> tag is used to label columns or rows, helping organize information. To create a header cell in an HTML table, use the <th> element. Header cells typically contain titles for each column or row, and they are bold by default.Syntax<th> Contents

How to change opacity of every data element on hover in a table using CSS ?

There is a Table made by using HTML in which data elements are set to a low opacity. The task is to change the opacity of a particular element when user hover over data elements. To make a table look better, we will use gradient colors to set backgrounds of the table data elements. In this approach,

How to add Borders and Shadows to Elements in CSS ?

Apply box shadows to elements to create a 3D effect, whereas adding borders to containers or boxes can enhance the structural clarity of a layout. In this article, we will learn how to add borders and shadows to the elements in CSS. We will explore two different approaches to adding borders and shad