CSS border-collapse 把表格相邻td的边框合并为一条

HTML/CSS 2014-06-13 border-collapse,table,CSS

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.me/201406440.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?