css里的empty-cells属性是所有浏览器都支持的,甚至包括ie8,它的用法是下面这个样子:
table {
empty-cells: hide;}估计你从语义上已经猜出它的作用了。它是为HTML table服务的。它会告诉浏览器,当一个table单元格里没有东西时,就隐藏它。下面的演示里,你可以点击里面按钮,它会切换empty-cells的属性值,看看table的显示有什么变化。
HTML代码
| Fruits | Vegetables | Rocks |
|---|---|---|
| Celery | Granite | |
| Orange | Flint |
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');
}};










