In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > empty-cells

empty-cells property

Browser support:

8

Specifies whether the border and background of empty table cells should be shown or not.

Note: The empty-cells property is supported in Internet Explorer from version 8.

If you want that the border and background of an empty cell will be visible in earlier versions of Internet Explorer, a possible solution is to place a whitespace ( ) into the cell.

JavaScript page for this property: emptyCells. You can find other example(s) there.

Possible values:

One of the following values:

-moz-show-background

Borders and backgrounds are drawn.

hide

Borders and backgrounds are not drawn.

inherit

Takes the value of this property from the computed style of the parent element.

show

Borders and backgrounds are drawn.

Default: show.

Example HTML code 1:

This example illustrates the use of the empty-cells property:

<head>
    <style>
        .hideEmpty {
            empty-cells: hide;
        }
        .showEmpty {
            empty-cells: show;
        }
    </style>
</head>
<body>
    Hide empty cells:
    <table class="hideEmpty">
        <tr>
            <td width="10" bgColor="#00b900"></td>
            <td>Pear</td>
        </tr>
        <tr>
            <td width="10" bgColor="#d24015"></td>
            <td>Cherry</td>
        </tr>
    </table>
    <br /><br />
    Show empty cells:
    <table class="showEmpty">
        <tr>
            <td width="10" bgColor="#00b900"></td>
            <td>Pear</td>
        </tr>
        <tr>
            <td width="10" bgColor="#d24015"></td>
            <td>Cherry</td>
        </tr>
    </table>
</body>