css table中empty-cells屬性的具體分析

css裡的empty-cells屬性是所有瀏覽器都支援的，甚至包括IE8，它的用法是下面這個樣子：

table {  empty-cells: hide;}

估計你從語義上已經猜出它的作用了。它是為HTML table服務的。它會告訴瀏覽器，當一個table儲存格裡沒有東西時，就隱藏它。下面的示範裡，你可以點擊裡面按鈕，它會切換empty-cells的屬性值，看看table的顯示有什麼變化。

HTML代碼

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

CSS代碼

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代碼

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