CSS 如何在表格行添加底边框，但最后一行除外

在本文中，我们将介绍如何使用CSS在表格的每一行上添加底边框，但不包括最后一行。这在许多网页设计中是常见的需求，可以帮助提高表格的可读性和美观度。

阅读更多：CSS 教程

使用border属性添加底边框

要在表格的每一行添加底边框，我们可以使用border属性。border属性可以控制元素的边框样式、宽度和颜色。通过将border-bottom属性应用于表格的每一行，我们可以实现底边框的效果。

table tr {
  border-bottom: 1px solid black;
}

上述代码将为表格的每一行添加一个1像素宽的黑色实线底边框。然而，这会导致最后一行也具有底边框，而不符合我们的需求。

使用:last-child伪类选择器排除最后一行

为了排除最后一行，我们可以使用CSS的:last-child伪类选择器。:last-child选择器选择父元素的最后一个子元素并应用样式。在这种情况下，我们可以将:last-child选择器应用于表格行来排除最后一行的底边框。

table tr:not(:last-child) {
  border-bottom: 1px solid black;
}

上述代码中的:not(:last-child)表示除最后一行之外的所有表格行。通过将border-bottom样式应用于:not(:last-child)，我们可以在所有行上添加底边框，但不包括最后一行。

完整示例

下面是一个完整示例，展示了如何使用CSS在表格的每一行添加底边框，但不包括最后一行。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
}

table tr:not(:last-child) {
  border-bottom: 1px solid black;
}

table th, table td {
  padding: 8px;
  text-align: left;
}

table th {
  background-color: #f2f2f2;
}
</style>
</head>
<body>

<h2>示例表格</h2>

<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>
  <tr>
    <td>王五</td>
    <td>27</td>
    <td>广州</td>
  </tr>
</table>

</body>
</html>

在上述示例中，我们使用了CSS选择器table tr:not(:last-child)将border-bottom样式应用于除最后一行之外的所有表格行。这样，我们实现了在表格的每一行上添加底边框的效果，同时排除了最后一行。