The empty-cells property controls whether empty cells are rendered or not.
You can use this property when the "separate" value is set to the border-collapse property.
This property can apply to the TABLE element.
table {
border: 2px #000000 solid;
empty-cells: hide;
}
| Property | Value | Explanation |
|---|---|---|
| empty-cells | show | borders are displayed around empty cells (default) (in MSIE, borders are not displayed) |
| hide | borders are not displayed around empty cells |
<html> <head> <title>TAG index</title> <style type="text/css"> table { width: 600px; border: 2px #2b2b2b solid; border-collapse: separate; margin-bottom: 20px; } td, th { border: 2px #2b2b2b solid; } #example1 { empty-cells: show; } #example2 { empty-cells: hide; } </style> </head> <body> <table id="example1"> <tr> <th colspan="2">Borders are displayed around empty cells</th> </tr> <tr> <td>Cell A</td> <td></td> </tr> <tr> <td></td> <td>Cell B</td> </tr> </table> <table id="example2"> <tr> <th colspan="2">Borders are not displayed around empty cells</th> </tr> <tr> <td>Cell A</td> <td></td> </tr> <tr> <td></td> <td>Cell B</td> </tr> </table> </body> </html>
| Borders are displayed around empty cells | |
|---|---|
| Cell A | |
| Cell B | |
| Borders are not displayed around empty cells | |
|---|---|
| Cell A | |
| Cell B | |