The Empty-cells property in CSS is supported by all browsers, even including IE8, and its usage is as follows:
Table { empty-cells:hide;}
It is estimated that you have semantically guessed its usefulness. It is for the HTML table service. It tells the browser to hide it when there is nothing in a table cell. In the following demo, you can click on the inside button, which will toggle the Empty-cells property values to see what the table's display has changed.
HTML code
<table cellspacing= "0" id= "table" > <tr> <th>Fruits</th> <th>vegetables </th> <th>Rocks</th> </tr> <tr> <td></td> <td >Celery</td> <td>Granite</td> </tr> <tr> <td>orange </td> <td></td> <td>Flint</td> </tr></table> <button id= "B" data-ec= "Hide" > Toggle empty-cells</button>
CSS Code
body { text-align:center; padding-top:20px; Font-family:arial, Sans-serif;} Table { border:solid 1px black; Border-collapse:separate; border-spacing:5px; width:500px; margin:0 Auto; Empty-cells:hide; Background:lightblue;} Th, TD { text-align:center; Border:solid 1px black; padding:10px;} button { margin-top:20px;}
JS Code
var B = document.getElementById (' B '), t = document.getElementById (' table '); B.onclick = function () { if ( This.getattribute (' data-ec ') = = = ' Hide ') { t.style.emptycells = ' show '; This.setattribute (' Data-ec ', ' Show '); } else { t.style.emptycells = ' hide '; This.setattribute (' Data-ec ', ' hide ');} ;