css border-collapse介绍
css border-collapse属性用于设置表格边框合并显示还是分开显示。
语法：
border-collapse : separate | collapse
border-collapse的取值有两个：
- separate 边框会被分开，即显示两条线。
- collapse 合并显示为一条线。
默认值为separate。
css border-collapse实例
<!DOCTYPE html>
<html lang=\"zh-cmn-Hans\">
<head>
< charset=\"utf-8\" />
< >css border-collapse设置表格单线边框和双线边框</ >
<style>
h1{font-size:16px;font-family:Arial;}
.separate{border-collapse:separate;}
.collapse{border-collapse:collapse;}
</style>
</head>
<body>
<h1>separate: 双线边框</h1>
<table border=\"1\" class=\"separate\">
<tbody>
<tr>
<td>php</td>
<td>mysql</td>
<td>java</td>
</tr>
<tr>
<td> http://www.manongjc.com/article/1211.html </td>
<td>html</td>
<td>css</td>
</tr>
</tbody>
</table>
<h1>collapse: 单线边框</h1>
<table border=\"1\" class=\"collapse\">
<tbody>
<tr>
<td>php</td>
<td>mysql</td>
<td>java</td>
</tr>
<tr>
<td>jsp</td>
<td>html</td>
<td>css</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
![\"css](\"/images/css-border-collapse-1211.png\")
css border-collapse扩展阅读
其实用另外一种方法也可以实现border-collapse:collapse的效果。给table上边和左边设上边框线，给td下边和右边设上边框线,然后将表格的border-spacing设置为0
<html>
<head>
< http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
< >css border-collapse设置表格单线边框和双线边框 http://www.manongjc.com/article/1211.html</ >
<style type=\"text/css\">
.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;}
</style>
</head>
<body>
<table class=\"manongjc\">
<tr>
<td>码农教程</td>
<td>php教程</td>
<td>java教程</td>
</tr>
<tr>
<td>mysq教程</td>
<td>sql教程</td>
<td>html教程</td>
</tr>
<tr>
<td>css教程</td>
<td>sql教程</td>
<td>ant教程</td>
</tr>
</table>
</body>
</html>
运行结果：
![\"css](\"/images/css-border-collapse-1211_1.png\")
继续阅读与本文标签相同的文章
上一篇 :
编程语言Nim 中文官网现已上线
-
健乐教学机器人可开展的教学实训内容
2026-05-14栏目： 教程
-
5G套餐曝光遭“吐槽”，iphone11受追捧，导致苹果11销量比较高
2026-05-14栏目： 教程
-
为什么修电脑的叫自己不要杀毒和清理垃圾？
2026-05-14栏目： 教程
-
当水乡建筑遇上机器人，成就乌镇又一网红景点
2026-05-14栏目： 教程
-
惊险！手刹失灵，郴州一货车开启“无人驾驶”模式……
2026-05-14栏目： 教程