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

css border-collapse介绍

css border-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: 双线边框

php	mysql	java
http://www.manongjc.com/article/1211.html	html	css

collapse: 单线边框

php	mysql	java
jsp	html	css

运行结果：

css border-collapse扩展阅读

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

css border-collapse设置表格单线边框和双线边框 http://www.manongjc.com/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;}

码农教程	php教程	java教程
mysq教程	sql教程	html教程
css教程	sql教程	ant教程

运行结果：