使用 CSS border-bottom 属性的解决方案
如果我们只想在表格行的底部添加边框，我们可以将 CSS border-bottom 属性应用于放置在 <tr> 标签内的 <td> 元素。
让我们看看这个解决方案的使用情况。
向表格行添加边框底部的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
tr.border-bottom td {
border-bottom: 1pt solid #ff000d;
}
</style>
</head>
<body>
<table>
<tbody>
<tr class="border-bottom">
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>
</body>
</html>
正如我们在上面的示例中所注意到的，我们的 <td> 元素之间存在间距。
如果我们需要删除它们之间的间距，请尝试以下示例，我们将设置为“collapse”的 border-collapse 属性添加到 <table> 元素。
使用 CSS 删除 <td> 元素之间的间距的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table {
border-collapse: collapse;
}
tr.border-bottom {
border-bottom: 1px solid #ff000d;
}
</style>
</head>
<body>
<table>
<tbody>
<tr class="border-bottom">
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>
</body>
</html>
日期：2020-06-02 22:15:04 来源：oir作者：oir