900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > css单线边框_css border-collapse设置表格单线边框和双线边框

css单线边框_css border-collapse设置表格单线边框和双线边框

时间:2020-05-15 22:04:21

相关推荐

css单线边框_css border-collapse设置表格单线边框和双线边框

css border-collapse介绍

cssborder-collapse属性用于设置表格边框合并显示还是分开显示。

语法:

border-collapse : separate | collapse

border-collapse的取值有两个:

separate边框会被分开,即显示两条线。

collapse合并显示为一条线。

默认值为separate。

css border-collapse实例

css border-collapse设置表格单线边框和双线边框

h1{font-size:16px;font-family:Arial;}

.separate{border-collapse:separate;}

.collapse{border-collapse:collapse;}

separate: 双线边框

collapse: 单线边框

运行结果:

css border-collapse扩展阅读

其实用另外一种方法也可以实现border-collapse:collapse的效果。给table上边和左边设上边框线,给td下边和右边设上边框线,然后将表格的border-spacing设置为0

css border-collapse设置表格单线边框和双线边框 /article/1211.html

.manongjc{border-top:1px solid #999;border-left:1px solid #999;border-spacing:0;}

.manongjc td{border-bottom:1px solid #999;border-right:1px solid #999;padding:10px 30px;}

运行结果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。