一个属性border-collapse解决Table的边框问题

当使用HTML中的table标签创建表格时，常常会遇到边框重叠的问题。一个属性border-collapse可以解决这个问题。

什么是border-collapse

border-collapse是CSS中的一个属性，用于设置表格元素边框合并的方式。

默认情况下，HTML中的表格元素的边框会分离，即每个单元格都有自己的边框。如果两个单元格的边框相邻，它们会产生重叠现象，使得表格的线条看起来很粗。

border-collapse可以改变表格元素的边框合并方式，使得相邻的边框可以合并起来，从而解决边框重叠的问题。

如何使用border-collapse

border-collapse属性的值可以是collapse或者separate。

• 使用collapse时，相邻的单元格边框会合并为一个共同的边框。
• 使用separate时，相邻的单元格边框会保持分开。

下面是一个使用border-collapse: collapse的示例代码。

<style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
    }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>男</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>20</td>
    <td>女</td>
  </tr>
</table>

以上代码中，我们设置了表格元素的border-collapse属性为collapse，这样表格中相邻单元格的边框就会合并为一个共同的边框，边框重叠问题得以解决。

下面是一个使用border-collapse: separate的示例代码。

<style>
    table {
      border-collapse: separate;
      border-spacing: 5px;
    }
    th, td {
      border: 1px solid black;
      padding: 10px;
    }
</style>

<table>
  <tr>
    <th>订单号</th>
    <th>商品名称</th>
    <th>单价</th>
    <th>数量</th>
    <th>金额</th>
  </tr>
  <tr>
    <td>20180101</td>
    <td>小米手机</td>
    <td>2000</td>
    <td>2</td>
    <td>4000</td>
  </tr>
  <tr>
    <td>20180102</td>
    <td>华为平板</td>
    <td>2500</td>
    <td>1</td>
    <td>2500</td>
  </tr>
</table>

以上代码中，我们设置了表格元素的border-collapse属性为separate，这样表格中相邻单元格的边框会保持分开，而且我们还设置了border-spacing属性来定义单元格之间的间距。这样表格看起来更加美观。