html表格边框设置单线,border-collapse把table边框的样式设置成单线

table 默认的情况，如果给单元格，添加边框的时候。每个边框都会有自己的边框。这样看上去就出现了，类似的双边框情况。看上去一点也不美观，还是把边框设置成单线的时候，比较美观。table中有个border-collapse属性，就是用来合并边框的。防止出现“双边框的情况。

collapse的本意就有折叠的含义，首先给出一个示例的效果。

没有把边框设置成单线的效果

border-collapse 没有合并单边框的图示

把边框设置成单线的效果

border-collapse 合并单边框

使用 collapse 对表格的边框合并成单线的示例代码

css 文件

table{

border-collapse: collapse;

}

table td, table th{

border: 1px solid #c5c5c5;

color: white;

}

table thead th {

background-color: #f4615c;

}

table tr th, table tr td{

padding: 5px 12px

}

table tr:nth-child(odd){

background: #01cf97;

}

table tr:nth-child(even){

background: #a2a9b6;

}

html 文件

Simple table with header

First name	Last name
John	Doe
Jane	Doe

Table with thead, tfoot, and tbody

Header content 1Header content 2

Footer content 1Footer content 2Body content 1Body content 2

如果想取消边框，可以把示例中的 border 设置 成0 。同时边框缝隙也会被消失。