CSS - empty-cell Property
The empty-cell property in CSS is used to control the rendering of cells in a table that have no content or are otherwise considered "empty." It only applies to tables and table cells.
Possible Values
show − The borders of an empty cell are rendered.
hide − The borders of an empty cell are not drawn.
Applies to
All the elements with a display of table-cell.
DOM Syntax
object.style.emptyCell = "hide | show";
Example
Here is the empty-cells property used to hide borders of empty cells in the <table> element.
<html> <head> <style> table.empty { width: 350px; border-collapse: separate; empty-cells: hide; } table.show { width: 350px; border-collapse: collapse; empty-cells: show; } td.empty { padding:5px; border-style:solid; border-width:1px; border-color:#999999; } </style> </head> <body> <div> <h2>empty-cell: hide</h2> <table class = "empty"> <tr> <th></th> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <th>Title</th> <td class = "empty">Data 1</td> <td class = "empty">Data 2</td> </tr> <tr> <th>Title</th> <td class = "empty">Data 1</td> <td class = "empty"></td> </tr> </table> </div> <div> <h2>empty-cell: show</h2> <table class = "show"> <tr> <th></th> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <th>Title</th> <td class = "empty">Data 1</td> <td class = "empty">Data 2</td> </tr> <tr> <th>Title</th> <td class = "empty">Data 1</td> <td class = "empty"></td> </tr> </table> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google