csstable中empty-cells屬性的具體分析

table {
 empty-cells: hide;}

<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">切換EMPTY-CELLS</button>

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

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