不能直接设置border，因其不渲染边框；应通过设置td/th边框配合border-collapse: collapse或separate实现行边框效果。
直接给 <tr> 加 <code>border 无效？原因和替代方案
HTML 表格的 <tr> 元素本身不支持 <code>border 样式，这是 CSS 规范决定的：<tr> 是行容器，不渲染边框，真正接收边框的是 <code><td> 或 <code><th>。所以给 <code><tr> 写 <code>border: 1px solid red 不会生效。
正确做法是控制该行内所有单元格的边框样式。常见误区是只设单侧边框（比如只设 border-bottom），结果发现上下行之间边框重叠、颜色打架——这是因为默认 border-collapse: collapse 下相邻边框会合并。
- 必须配合
border-collapse: separate才能让每行的上/下边框独立控制 - 或者保持
collapse，但统一用border-bottom给每行最后一个单元格设色（更稳妥） - 若需整行“外轮廓”，推荐用
outline+outline-offset模拟（注意它不占布局空间）
border-bottom 配合 :last-child 实现“行底边”着色
这是最常用、兼容性最好、且不破坏表格结构的方式：为每一行的最后一个单元格设置底部边框，视觉上就等效于整行下边框变色。
tr:nth-child(1) td:last-child { border-bottom: 2px solid #ff6b6b; }
tr:nth-child(2) td:last-child { border-bottom: 2px solid #4ecdc4; }
tr:nth-child(3) td:last-child { border-bottom: 2px solid #45b7d1; }
优点是无需改 border-collapse，不影响原有间距；缺点是仅能模拟“下边”，不能单独控制上边或左右边。如果表格有跨列（colspan），要确保 td:last-child 仍能命中目标单元格——此时建议加 class 显式标记。
用 border-collapse: separate 精确控制每行四边
启用分离边框后，每个 <td> 的边框互不合并，就能分别设置 <code>border-top、border-bottom 等。关键是要统一设置整行所有单元格的对应边：
- 给
tr:nth-child(2) td设border-top: 1px solid #96ceb4→ 第二行顶部边框 - 给同一行的
td设border-bottom: 1px solid #feca57→ 第二行底部边框 - 记得设
border-spacing: 0，否则单元格间会出现空白间隙 - IE8+ 支持良好，但要注意移动端 Safari 对
border-spacing在某些缩放下可能有微小偏移
避免边框叠加导致颜色异常的三个细节
即使写了正确的 CSS，也常出现“明明设了红色，看起来却是深灰色”的问题——本质是多层边框在 collapse 模式下自动取“较粗或较深”者。
- 检查是否意外继承了父级
table的border（比如table { border: 1px solid #ccc; }） - 确认没有同时给
td和tr设border-bottom，否则会双线叠加 - 使用
box-sizing: border-box时，边框计入宽高，可能导致列宽错位，建议对td单独重置为content-box
真要逐行定义不同边框色，核心不是“怎么写”，而是“在哪一层写”和“谁跟谁合并”。多数情况下，border-bottom + last-child 就够用；只有当设计明确要求上下双色、或需突出某行轮廓时，才值得切到 separate 模式并精细控制每个 td 的四边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
