如何为表格中最后一个非空<tr>元素添加border-bottom样式？

有几种实用方案可以帮你选中表格里最后一个非空的<tr>元素并添加border-bottom样式，我来逐一说明：

方案一：兼容性优先（无需现代CSS特性） #

这个方法兼容性拉满，能覆盖绝大多数浏览器，思路是“先给所有非空行加边框，再移除后面还有非空行的元素的边框”：

/* 给所有不带empty-row类的tr添加底部边框 */
tr:not(.empty-row) {
    border-bottom: 2px solid #000; /* 可根据需求自定义样式 */
}

/* 移除后面紧跟着另一个非空tr的元素的底部边框 */
tr:not(.empty-row) + tr:not(.empty-row) {
    border-bottom: none;
}

原理很简单：所有非空行默认都有底部边框，但如果一个非空行后面还有另一个非空行，就把它的边框去掉——这样最后一个非空行（后面要么是空行，要么是表格末尾）的边框会被保留下来，完全符合你的需求。

方案二：使用现代CSS的:has()选择器（简洁直观） #

如果不需要兼容IE这类旧浏览器，用:has()选择器可以直接定位目标元素，写法更直观：

/* 选中两种场景的非空行：
   1. 本身是表格最后一个子元素（表格末尾没有空行）
   2. 后面紧跟着空行，且表格最后一个子元素是空行（表格末尾有空行）
*/
tr:not(.empty-row):where(:last-child, :has(+ tr.empty-row:last-of-type)) {
    border-bottom: 2px solid #000;
}

这个选择器直接瞄准我们需要的元素，但注意:has()目前仅在Chrome、Firefox 121+、Safari等现代浏览器中支持。

内容的提问来源于stack exchange，提问作者BabyCabbage