最常见解法是使用 tr:last-child td { border-bottom: 2px solid #3498db; }，需作用于 td（或 th）而非 tr；若限定 tbody，则用 tbody tr:last-child td；注意避免与 border-collapse: collapse 冲突，并优先采用语义化 class 应对 colspan 场景。
只给表格最后一行加底边框
最常见需求是让表格数据区最后一行带一条明显底边，比如区分页脚或强调截止行。关键不是给 table 加 border-bottom，而是精准选中最后一行的单元格。
直接写 tr:last-child td { border-bottom: 2px solid #3498db; } 即可生效。注意必须用 td（和 th，如果最后一行含表头）——只写 tr:last-child 不会渲染边框，因为 tr 本身不接受边框样式。
- 如果表格有
<thead> 和 <code><tbody>，且只想作用于 <code><tbody> 最后一行，改用 <code>tbody tr:last-child td - 若最后一行含合并单元格（
colspan），:last-child仍按 DOM 顺序计数，不会跳过被合并的列，一般不影响效果 - 避免和
border-collapse: collapse冲突：该模式下相邻边框会合并，所以同一位置若有上一行的border-top，可能覆盖你设的border-bottom；此时要么统一控制，要么把上一行的border-top设为none - 如果表格已设
border-collapse: collapse，这个外边框会紧贴最后一行单元格底边，无间隙 - 若想留空隙，加
margin-bottom: 1rem或用padding-bottom配合border-bottom（需同时设box-sizing: border-box） - 不要混用
cellspacing或旧式border属性，它们和 CSS 边框逻辑冲突，容易导致渲染异常 - 如果表头行也用了
th，且结构一致（即th也在第 4 位），需同步加tr:last-child th:nth-child(4) - 遇到
colspan会导致序号偏移，例如某行前两个单元格合并了，那原本第 4 列的td实际是:nth-child(3)；此时建议改用语义化 class，如<td class="amount">，再写 <code>tr:last-child .amount -
double、dashed等样式在这里同样有效，但粗细超过 2px 时要注意是否和字体大小比例失调 -
border-collapse: collapse下，若相邻单元格都设了border-bottom和border-top，浏览器取“更粗/更显眼”的那个，你的设置可能被覆盖——检查计算样式（DevTools 的 Computed 标签页）确认最终生效值 - 父容器设置了
overflow: hidden且表格高度固定，底边框可能被裁切，临时加padding-bottom可验证 - 用了
display: table-row-group等非标准 display 值，部分老浏览器不支持对这类元素设边框，优先保持table/tr/td的原生 display
给整个表格容器加底部外边框
有时需要的是表格整体下方一条分隔线，比如和后续段落拉开距离。这时才该操作 table 元素本身。
写 table { border-bottom: 1px solid #ddd; } 就够了。但要注意：它和单元格内部边框无关，也不会影响表格内容区的视觉结构。
仅对特定列的最后一行加底边框
比如只让“金额”列最后一行有底边，用于财务报表收尾强调。不能靠整行选择，得结合列定位。
假设“金额”是第 4 列，用 tr:last-child td:nth-child(4) { border-bottom: 3px double #e74c3c; }。注意 :nth-child(4) 指该行中第 4 个 td，不是表格第 4 列所有 td ——这点常被误读。
为什么 border-bottom 有时不显示
不是代码写错，而是被其他规则压制或渲染机制干扰。三个高频原因：
colspan 又启用了 border-collapse: collapse 时，:nth-child() 选择器的行为会变得不可预测。这种情况下，class 驱动的样式比纯 CSS 选择器更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
