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
Table with thead, tfoot, and tbody
Header content 1Header content 2
Footer content 1Footer content 2Body content 1Body content 2
如果想取消边框,可以把示例中的 border 设置 成0 。同时边框缝隙也会被消失。