tr元素无法设置边框，因其不参与盒模型绘制；必须通过td/th设置边框，并配合border-collapse属性控制合并效果，否则会出现双线、断线或无效问题。
直接给 tr 元素设 border 是无效的——浏览器不渲染 tr 的边框，哪怕写了也不会显示。
为什么 tr { border: 1px solid red; } 没反应
HTML 表格的渲染模型里，tr 本身不参与盒模型绘制，它的边框属性被忽略。真正起作用的是 td 和 th 的边框，以及 table 的 border-collapse 状态。
- 即使你用开发者工具看到
tr样式生效，页面上依然看不到边框 -
tr上设置outline倒是能显示（但会破坏布局，且不是边框） - 想“高亮某一行”，必须操作它内部的单元格，比如
tr:nth-child(2) td
给某一行加顶部/底部边框的正确写法
用伪类选择器定位目标行，再给它的所有单元格统一加某一边的边框：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
/* 第二行加粗顶边和底边 */
tr:nth-child(2) td,
tr:nth-child(2) th {
border-top: 2px solid #007acc;
border-bottom: 2px solid #007acc;
}
<p>/<em> 最后一行只加底边（避免重复） </em>/
tr:last-child td,
tr:last-child th {
border-bottom: 1px solid #999;
}- 别漏掉
th，否则表头和数据行边框不一致 - 如果用了
border-collapse: collapse，相邻单元格的同向边框会合并，所以border-top+border-bottom是安全的 - 要避免上下两行都设
border-bottom导致双倍粗细，可用:not(:last-child)过滤
隔行变色 + 边框强化的实用组合
单纯加边框容易让表格显得沉重，配合背景色和边框颜色微调，可提升可读性而不增加视觉噪音：
立即学习“前端免费学习笔记（深入）”；
tr:nth-child(even) td,
tr:nth-child(even) th {
background-color: #f9f9f9;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
<p>tr:hover td,
tr:hover th {
background-color: #eef7ff !important;
border-top: 1px solid #007acc;
border-bottom: 1px solid #007acc;
}-
border-top/bottom比四边都设更轻量，也更符合阅读流（人眼横向扫视） -
:hover时加边框比始终显示更友好，尤其在密集表格中 - 注意
!important在:hover中常需加，防止被隔行背景的样式覆盖
真正难的不是“怎么加”，而是“加在哪”——tr 是个幻影容器，所有边框操作最终都得落到 td 或 th 上，且必须和 border-collapse 配合。漏掉其中一环，就容易出现双线、断线或干脆没反应。
