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

table {

empty-cells: hide;

}

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

HTML代碼

FruitsVegetablesRocks

	Celery	Granite
Orange		Flint

切換EMPTY-CELLS

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

}

};

演示

在上面的演示中，我為能讓單元格的邊框顯示出來，在單元格的邊框間添加了空隙。有時候這個屬性不會有任何視覺效果，因為你必須讓你里面有可見的東西。

總結

以上是生活随笔為你收集整理的html 的empty属性,你未必知道的CSS小知识：你知道table里的empty-cells属性吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。