必须先给td/th设初始透明边框，否则hover时因border-style默认为none而出现闪动或无效；正确写法是table tr td,table tr th{border:1px solid transparent;transition:border-color .2s ease}，tr:hover时仅改border-color。
直接用 :hover 改 border-color 就行，但必须先设初始边框，否则悬停时会“闪一下”或根本没反应。
为什么表格行 hover 时边框不变色？
常见错误是只写 tr:hover { border-bottom: 1px solid red; }，却没给 tr 或它的子元素（如 td）预先定义 border 样式。浏览器默认 border-style 是 none，宽度为 0，所以首次 hover 会从无到有“跳变”，视觉上像没生效。
- 表格边框由
td或th承载，tr本身不渲染边框（除非用border-collapse: separate+border） - 如果用了
border-collapse: collapse（默认），相邻单元格共用边框，改单个td的border-color可能被覆盖或不均匀 - DataTables 等库会动态加 class（如
.odd/.even），CSS 选择器必须匹配这些 class 才能生效
正确写法：给 td 设透明初始边框
这是最稳定、兼容性最好的方式，适用于所有现代浏览器（包括 IE9+）。
- 先统一给
td和th设初始边框：border: 1px solid transparent - 在
tr:hover td中只改border-color，避免重绘布局 - 加
transition: border-color 0.2s ease让变色平滑（别写transition: all） - 若只要顶部/底部边框变色，就只设
border-top和border-bottom，其他方向保持transparent
table tr td,
table tr th {
border: 1px solid transparent;
transition: border-color 0.2s ease;
}
table tr:hover td,
table tr:hover th {
border-color: #4a90e2;
}
特殊场景：只让上下边框变色
比如设计中只要 hover 行时显示“下划线+顶线”，其他边框不动，就得精确控制方向。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 初始写
border-top: 1px solid transparent; border-bottom: 1px solid transparent;，左右边框可省略或设为 0 - hover 时只更新这两个方向：
border-top-color: #d32f2f; border-bottom-color: #d32f2f; - 注意
border-collapse: collapse下，相邻行的 bottom 和 top 会合并，所以实际看到的是单条线 —— 这反而是优势，不会出现双线重叠 - 如果表格用了
border-collapse: separate，需额外处理border-spacing，否则 gap 里会漏出背景色
移动端和可访问性容易被忽略的点
:hover 在触摸设备上行为不可靠：iOS Safari 只在点击后触发一次，Android Chrome 表现不一致。这不是 bug，是规范使然。
- 纯
:hover方案在移动端基本失效，不要依赖它做核心交互反馈 - 如果必须支持触控，用 JavaScript 监听
touchstart并临时加 class（记得touchend清除，防残留） - 键盘用户无法触发
:hover，对可聚焦元素（如带tabindex="0"的tr）应同时支持:focus样式 - 颜色对比度要达标（至少 4.5:1），别用浅灰配浅蓝这种“看起来变了其实看不清”的组合
真正难的不是写几行 CSS，而是判断该用 td 还是 tr 作为样式载体、要不要兼容旧库的 class 命名、以及是否值得为触控设备多加一层 JS 逻辑 —— 这些才是上线前卡住人的地方。
