CSS empty-cells Property

This property is used to specify whether to display the borders or not in the empty cells in a table.

Syntax:

empty-cells: show|hide|initial|inherit;

Default Value: show

Property values:

show property: This property is used to display the borders on empty cells.
hide property: This property is used to hide the border in empty-cell in the table.
initial property: This property is used to set the default property.
inherit property: This property is used to inherit the property from its parent.

Example: In this example, we are using empty-cell: show property.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>empty-cell property</title>
    <style>
        table.geek {
            empty-cells: show;
        }

        td {
            text-align: center;
        }

        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }

        .geeks {
            font-size: 17px;
        }
    </style>
</head>

<body>
    <center>
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">A computer science
            portal for geeks</div>

        <h2>empty-cells: show;</h2>
        <table class="geek" border="1">
            <tr>
                <td>C Programming</td>
                <td>C++ Programming</td>
            <tr>
                <td>Java</td>
                <td></td>
            </tr>
        </table>
    </center>
</body>
  
</html>

Output:

Example: In this example, we are using empty-cell: hide property.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>empty-cell property</title>
    <style>
        table.geek {
            empty-cells: hide;
        }

        td {
            text-align: center;
        }

        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }

        .geeks {
            font-size: 17px;
        }
    </style>
</head>

<body>
    <center>
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">A computer science
            portal for geeks</div>

        <h2>empty-cells: show;</h2>
        <table class="geek" border="1">
            <tr>
                <td>C Programming</td>
                <td>C++ Programming</td>                
            <tr>
                <td>Java</td>
                <td></td>
            </tr>
        </table>
    </center>
</body>
  
</html>

Output:

Example: In this example, we are using empty-cell: initial property.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>empty-cell property</title>
    <style>
        table.geek {
            empty-cells: initial;
        }

        td {
            text-align: center;
        }

        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }

        .geeks {
            font-size: 17px;
        }
    </style>
</head>

<body>
    <center>
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">A computer science
            portal for geeks</div>

        <h2>empty-cells: show;</h2>
        <table class="geek" border="1">
            <tr>
                <td>C Programming</td>
                <td>C++ Programming</td>                
            <tr>
                <td>Java</td>
                <td></td>
            </tr>
        </table>
    </center>
</body>
  
</html>

Output:

Example: In this example, we are using empty-cell: inherit property.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>empty-cell property</title>
    <style>
        table.geek {
            empty-cells: initial;
        }

        .g4g {
            empty-cells: inherit;
        }

        td {
            text-align: center;
        }

        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }

        .geeks {
            font-size: 17px;
        }
    </style>
</head>

<body>
    <center>
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">A computer science
            portal for geeks</div>

        <h2>empty-cells: show;</h2>
        <table class="geek" border="1">
            <tr>
                <td>C Programming</td>
                <td>Algorithm</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <table class="g4g" border="1">
                        <tr>
                            <td>DP</td>
                            <td>Backtracking</td>
                        </tr>
                        <tr>
                            <td>Sorting</td>
                            <td></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </center>
</body>
  
</html>

Output: image inherit property

Supported Browsers: The browsers supported by CSS | empty-cells Property are listed below:

Google Chrome
Edge
Firefox
Opera
Safari

CSS empty-cells Property

Explore