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

You are here: Reference > JavaScript > client-side > style handling > properties > emptyCells

emptyCells style property

Browser support:

8

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

Note: The emptyCells 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.

Syntax:

object.emptyCells;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: empty-cells

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the emptyCells property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeEmptyCells (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var table = document.getElementById ("myTable");
            table.style.emptyCells = selectState;
        }
    </script>
</head>
<body>
    <table id="myTable">
        <tr>
            <td width="10" bgColor="#00b900"></td>
            <td>Pear</td>
        </tr>
        <tr>
            <td width="10" bgColor="#d24015"></td>
            <td>Cherry</td>
        </tr>
    </table>
    <br />
    Modify emptyCells property: <br />
    <select onchange="ChangeEmptyCells (this);" size="4">
        <option />hide
        <option selected="selected" />show
        <option />-moz-show-background
        <option />inherit
    </select>
</body>