html 的empty属性,你未必知道的CSS小知识：你知道table里的empty-cells属性吗？

css里的empty-cells属性是所有浏览器都支持的，甚至包括IE8，它的用法是下面这个样子：

table {

empty-cells: hide;

}

估计你从语义上已经猜出它的作用了。它是为HTML table服务的。它会告诉浏览器，当一个table单元格里没有东西时，就隐藏它。下面的演示里，你可以点击里面按钮，它会切换empty-cells的属性值，看看table的显示有什么变化。

HTML代码

Fruits	Vegetables	Rocks
	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属性吗？相关推荐

html5boder属性,你未必知道的CSS小知识：border属性比你想象的要复杂
我们很多人都用过这样的写法: .example { border: solid 1px black; } 这里的border属性的用法实际上是一种简写的形式,它分别设置了border-style, b ...
html a text decoration,你未必知道的CSS小知识：text-decoration属性变成了属性简写
我相信有些小知识会让你大吃一惊. 跟着最新的CSS规范,text-decoration现在的写法是这样的: a { text-decoration: overline aqua wavy; } tex ...
css没有border,你未必知道的CSS小知识：为什么没有人使用border-image
之前我曾经写过一篇关于CSS的border-image属性的文章.现在几乎所有的现代浏览器都支持这个属性--除了IE10及以下IE版本. 看起来这是一个非常漂亮的CSS功能,它可以让你用图片修饰元素的 ...
html中word-wrap无效,你未必知道的CSS小知识：word-wrap和overflow-wrap是等效的
word-wrap并不是一个很常用的CSS属性,但在特定的环境中确实非常有用的.我们经常使用的一个例子是让页面中显示一个长url时换行,而不是撑破页面,下面是一个例子. HTML代码 supercal ...
10个你未必知道的CSS技巧与14种cssdiv中基本滤镜介绍
2019独角兽企业重金招聘Python工程师标准>>> 1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的: font-weight:bold; font-style:i ...
你未必知道的CSS故事：揭开leading的面纱
从传承说起作为网页排版语言,CSS跟其他专业或大众化的排版软件一样,同样植根于传统出版.传统出版,特别是铅活字印刷时代被称为"铅与火"的时代.而通过计算机软件排版印刷的时代,被称 ...
您未必知道的Css技巧
http://www.cnblogs.com/yukaizhao/archive/2007/04/12/css_tips.html 转载于:https://www.cnblogs.com/cry/ar ...
10年老司机，未必知道的IT基础知识
在各位小伙伴开始学习编程之前,掌握计算机基础知识十分重要. 今天小千给大家分享一些计算机基础知识及概念,希望对你有所帮助. 一.计算机的概念 Computer,全称电子计算机,俗称电脑.是一种能够按照 ...
android byte转string_唠点儿你不一定知道的Android小知识
本文作者作者:郑卫超链接: https://vchao.blog.csdn.net/article/details/104349868 本文由作者授权发布. 1. YYYY 和 yyyy 不一样 ...

html 的empty属性,你未必知道的CSS小知识：你知道table里的empty-cells属性吗？

html 的empty属性,你未必知道的CSS小知识：你知道table里的empty-cells属性吗？相关推荐

最新文章

热门文章