CSS border-collapse 把表格相邻td的边框合并为一条
HTML/CSS
2014-06-13
CSS有一个属性border-collapse,这货可以让table里相邻td的border合并为一条,这有什么好处呢?最显著的效果,在页面上有一个table,每个td都有border:1px solid #999,看看效果:
原始效果:
使用后的效果border-collapse:collapse的效果
明显就看出来,如果不使用border-collapse:collapse把两条边框合并为一条的话,相邻两个td的边框相等于1+1=2px的宽度,曾经包括我在内有部分前端人员这么干:
td { border-width: 0 1px 1px 0; border-style: solid; border-color: #999; }
效果:
在给第一行的td顶部加上border-top封住顶部,给所有第一列的td加上border-left封住左边
tr:first-child td { border-top: 1px solid #999; } tr td:first-child { border-left: 1px solid #999; }
效果就如同使用border-collapse:collapse效果一样了!
文字链接:《CSS border-collapse 把表格相邻td的边框合并为一条》
文章地址:http://www.qttc.net/201406440.html
除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源
相关博文
换一组Comments 0
Hi,你想第一个做沙发么?
乳名?小名?昵称?网名?均可
email,放心,我不会给你乱投广告的
想获得回访就把你的站点URL写上(没有留空)
[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法