border-collapse把table边框的样式设置成单线

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

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 文件

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

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