CSS | Свойство пустых ячеек

Опубликовано: 1 Марта, 2022

Это свойство используется для указания, отображать ли границы в пустых ячейках таблицы или нет.

Синтаксис:

 пустые ячейки: показать | скрыть | начальные | наследовать;

Стоимость недвижимости:

show property: This property is used to display the borders on empty cells.

Syntax:
```
empty-cell: show;
```

Example:

<!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>
            </trA>
            <tr>
                <td>Java</td>
                <td></td>
            </tr>
            </table>
        </center>
    </body>
</html>                    

Output:

Свойство скрытия: это свойство используется для скрытия границы в пустой ячейке таблицы.

Syntax:
```
empty-cell: hide;
```

Example:

<!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>
            </trA>
            <tr>
                <td>Java</td>
                <td></td>
            </tr>
            </table>
        </center>
    </body>
</html>                    

Output:

initial property: This property is used to set the default property.

Syntax:
```
empty-cell: initial;
```

Example:

<!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>
            </trA>
            <tr>
                <td>Java</td>
                <td></td>
            </tr>
            </table>
        </center>
    </body>
</html>                    

Output:

inherit property: This property is used to inherit the property from its parent.

Syntax:
```
empty-cell: inherit;
```

Example:

<!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:

Поддерживаемые браузеры: браузеры, поддерживаемые CSS | Свойства пустых ячеек перечислены ниже:

Google Chrome 1.0
Интернет Esplorer 8.0
Firefox 1.0
Opera 4.0
Safari 1.2

HTML CSS

CSS | Свойство пустых ячеек

РЕКОМЕНДУЕМЫЕ СТАТЬИ