CSS 如何在表格中添加水平线

在本文中，我们将介绍如何在HTML表格中使用CSS添加水平线。

阅读更多：CSS 教程

使用border属性添加水平线

要在表格中添加水平线，我们可以使用CSS中的border属性。通过设置边框的样式、宽度和颜色，我们可以创建水平线。

下面是一个示例表格：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

要添加水平线，我们可以在CSS中为表格的边框设置样式。以下是一个示例：

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}

在上述代码中，我们使用border-collapse属性来合并表格边框，并使用border属性为表头和单元格指定边框样式。这里我们设置边框宽度为1像素，边框样式为solid，边框颜色为黑色。

运行上述代码，我们可以看到表格中出现了水平线。

使用伪元素添加水平线

除了使用border属性，我们还可以使用CSS伪元素来添加水平线。通过在表格的特定元素上添加伪元素，我们可以在任意位置插入水平线。

以下是一个示例，我们将在表格的第一行后面插入水平线：

table tr:first-child::after {
  content: "";
  display: block;
  height: 1px;
  background-color: black;
}

在上述代码中，我们使用了::after伪元素来在第一行后面插入水平线。我们设置了内容为空，使用display: block使其作为块级元素显示，设置高度为1像素，背景颜色为黑色。

运行上述代码，我们可以看到表格的第一行后面出现了一条水平线。

使用border-bottom属性添加水平线

除了在表格的各个单元格上添加边框，我们还可以使用CSS中的border-bottom属性为每一行的最后一个单元格添加水平线。

以下是一个示例：

th, td {
  border-bottom: 1px solid black;
}

在上述代码中，我们使用了border-bottom属性来为表头和单元格的底部边框添加水平线。我们设置边框宽度为1像素，边框样式为solid，边框颜色为黑色。

运行上述代码，我们可以看到每一行的最后一个单元格都有水平线。

使用CSS样式框架

另一种添加水平线的方法是使用现成的CSS样式框架。这些框架通常提供了各种预定义的类，我们只需要将这些类应用到表格中的元素即可。

下面是一个使用Bootstrap样式框架的示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
  .table-bordered tr td {
    border-bottom: 1px solid black;
  }
</style>

<table class="table table-bordered">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

在上述代码中，我们首先引入了Bootstrap样式框架的CSS文件，然后在自定义样式中通过.table-bordered tr td选择器为每个单元格的底部边框添加了水平线。