CSS properties - empty-cells

revision:

empty-cells property

- sets whether or not to display borders on empty cells in a table.

Note: This property has no effect if border-collapse is "collapse".

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

Property values:

show : display borders on empty cells. This is default

hide : hide borders on empty cells

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.emptyCells="hide"

example: empty-cells property

empty-cells: hide:

Peter Griffin
Lois

empty-cells: show (default):

Peter Griffin
Lois
code: 
                    <div>
                        <h4>empty-cells: hide:</h4>
                        <table class="ex1" border="1">
                        <tr>
                            <td>Peter</td>
                            <td>Griffin</td>
                        </tr>
                        <tr>
                            <td>Lois</td>
                            <td></td>
                        </tr>
                        </table>
            
                        <h4>empty-cells: show (default):</h4>
                        <table class="ex2" border="1">
                        <tr>
                            <td>Peter</td>
                            <td>Griffin</td>
                        </tr>
                        <tr>
                            <td>Lois</td>
                            <td></td>
                        </tr>
                        </table>
                    </div>
                    <style>
                        table.ex1 {empty-cells: hide;}
                        table.ex2 {empty-cells: show;}
                    </style>