tr:hover无法直接设置边框因tr不渲染边框，需通过td/th元素控制；使用border-collapse:separate并配合tr:hover td, tr:hover th修改边框颜色，添加transition实现平滑效果。
表格边框悬停变色不能直接靠 tr:hover 改 border，因为 tr 本身不渲染边框——真正起作用的是 td、th 或 table 的边框样式。
为什么 tr:hover { border: 1px solid red; } 没反应？
浏览器对 tr 元素的边框支持极弱，多数情况下会被忽略；即使生效，也常因 border-collapse: collapse 被相邻单元格边框覆盖。真正控制边框的是 table、th、td 这些可渲染元素。
- 检查是否用了
border-collapse: collapse—— 这会让tr边框无效，必须改用separate（但会破坏常规表格紧凑感） - 若想高亮整行边框，得给
td和th同时设初始边框，并在tr:hover td, tr:hover th中改颜色 - 别漏掉
thead和tbody的结构差异：表头单元格可能需要单独处理
给整行加悬停边框的可靠写法
目标是鼠标移到某行时，该行所有单元格边框统一变色。关键在于：先定义初始边框，再通过父级 tr:hover 影响子元素。
- 确保
table使用border-collapse: separate或干脆不用 collapse（更可控） - 给
td和th设置统一初始边框，例如border: 1px solid #ddd - 用
tr:hover td, tr:hover th覆盖边框颜色，避免只写tr:hover导致无效 - 加上
transition: border-color 0.2s到td, th上，让变色平滑
table {
border-collapse: separate;
border-spacing: 0;
}
td, th {
border: 1px solid #ddd;
transition: border-color 0.2s;
}
tr:hover td,
tr:hover th {
border-color: #e74c3c;
}
只给数据行加边框悬停，排除表头
如果表头（thead）不该响应悬停，就别让它参与选择器匹配。用 tbody tr:hover 锁定范围，再精确作用于单元格。
-
thead th保持原边框，不加transition或 hover 样式 - 只对
tbody tr:hover td生效，thead tr:hover th不写——这样表头完全不受影响 - 注意：若
th在tbody里（比如首列标题），需额外加类或用:not(thead th)过滤
tbody tr:hover td {
border-color: #27ae60;
}
移动端和 Safari 下 hover 失效怎么办？
:hover 在触摸设备上行为不可靠：iOS Safari 只在点击后触发一次，Android Chrome 可能延迟响应或不触发。这不是 bug，而是规范限制。
- 纯 CSS 方案无法保证跨端一致，
tr:hover在手机上基本形同虚设 - 如需真实交互反馈，得用 JS 监听
touchstart+pointerover，动态添加is-hovered类 - 对无障碍用户（键盘导航），
:focus-within可作为补充，但不替代 hover - 别试图用
@media (hover: hover)做条件加载——它只区分设备能力，不解决触发时机问题
真正难的不是写出那几行 CSS，而是想清楚：你到底要高亮“视觉上的行”，还是“语义上的数据行”；要不要兼容手指操作；以及是否愿意为这点交互多维护一段 JS。这些决策点，比 border-color 本身更影响最终效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
