The specific analysis of Empty-cells property in CSS Table

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 ');}  ;