How to add border to an element on mouse hover 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 add border to an element on mouse hover using CSS ?

N

nikhilchhipa9

Improve

Article Tags :

Similar Reads

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 TableThe empty-cells: hide; style of the .gfg

How to add border to an element on mouse hover using CSS ?

Adding a border to an element on mouse hover using CSS involves changing the element's border style when the mouse pointer is over it. This effect enhances user interaction by visually highlighting the element, achieved using the :hover pseudo-class to modify border properties. Approach HTML Structu

How to Add Border Around Text using CSS ?

The CSS border property is used to add a border around text by wrapping the text in an HTML element like <span> or <p>. Syntax border: "borderWidth borderStyle colorName;"Example 1: Adding a border around the text content using CSS. [GFGTABS] HTML <p> The following text has a borde

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 Int

How to put a badge in a table cell using Bootstrap?

In this article, we will learn how to use badges in a table cell using Bootstrap. We will first learn how to use Bootstrap Badges and then add them inside cells of a table. Bootstrap Badges: Responsive Badges are included with the newest Bootstrap version. Badges add additional info like count or la

How to align right in a table cell using CSS ?

Aligning right in a table cell means positioning the content of the cell to the right side. In CSS, this can be achieved by applying the text-align property to the table cell or using the td selector. Align right in a table cell Using text-align propertyTo align the contents of a table cell to right

How to create a 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> Conten

How to create Chess pattern background using HTML and CSS ?

Chess patterns are simply certain tactical positions that regularly occur in games. It can be easily designed by using the pseudo selector of CSS. This type of pattern can be used to create confusing illusions. Preview: Approach: Create a centered container for the chessboard with a fixed size and b

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 and style border using CSS ?

The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val