表格行hover变色加transition无效，是因为tr不渲染背景，需给td/th显式设初始背景色并写transition；整行变色应通过tr:hover td触发，避免用transparent起始值、all过渡或table-layout:fixed干扰。
表格行 hover 变色加 transition 为什么没效果？
直接给 <tr> 或 <code><td> 加 <code>transition: background-color 0.3s 常常无效——因为 HTML 表格单元格默认没有背景色（background-color: transparent），而 transparent 到 #f0f0f0 的过渡在部分浏览器中不触发重绘，尤其在旧版 Safari 和某些 Chrome 版本里表现不稳定。
实操建议：
- 显式设置初始背景色，比如
background-color: #fff（哪怕就是白色） - 把
transition放在<td> 或 <code><th> 上，而不是 <code><tr>（<code><tr> 本身不渲染背景，依赖子元素） <li>避免用 <code>inherit或未声明的背景值作为起始态 - 不要用
all 0.25s，会意外触发边框、padding 等无关属性动画，影响性能 - 如果用了
border-collapse: collapse，记得检查 border 颜色是否也需要过渡（否则出现“撕裂感”）
如何让整行 hover 时所有单元格同步过渡？
想实现「鼠标移到某一行，整行所有 <td> 平滑变色」，关键不是靠 <code><tr> 动画，而是利用父级 hover 触发子元素样式变化，并确保每个单元格都带独立 transition。
<p>示例 CSS：</p>
<pre class="brush:php;toolbar:false;">table tr td {
background-color: #ffffff;
transition: background-color 0.25s ease;
}
table tr:hover td {
background-color: #f8f9fa;
}</pre>
<p>注意点：</p>
<ul>
<li>必须为 <code>td 和 th 都写上相同 transition 规则，否则表头不动
transition 在 table-layout: fixed 下有兼容性问题吗？
有。当表格设了 table-layout: fixed 且单元格内容动态变化（比如 JS 插入文字后宽度重算），某些浏览器（特别是 Firefox）可能跳过 transition，直接闪变。
原因：fixed 布局下，浏览器提前计算列宽，后续背景色更新被当成“样式重排”而非“样式重绘”，导致 transition 被跳过。
解决办法：
- 优先用
table-layout: auto（多数场景够用） - 若必须 fixed，给
td加will-change: background-color（仅在 hover 前临时启用，避免全局性能损耗） - 避免在 hover 状态中同时修改 width / padding / font-size —— 这些会强制 layout，打断 transition 流程
移动端点击无 hover 效果？怎么补全交互反馈
iOS Safari 和 Android Chrome 默认不支持纯 hover，触摸后不会触发 :hover，所以过渡动画在手机上“静音”。这不是 bug，是规范行为。
可行方案：
- 用
:active替代（简单但只在按住瞬间生效）：td:active { background-color: #e9ecef; } - 加 JS 监听
touchstart/touchend切换 class，再对 class 做 transition（更可靠） - 对桌面和移动分别处理：用
@media (hover: hover)区分是否支持 hover，避免移动端加载冗余 transition
真正麻烦的不是加动画，而是让动画在不同设备、不同表格结构（合并单元格、固定表头、虚拟滚动）里都保持可预测——这些地方的 layout 触发时机和 repaint 区域，远比看起来复杂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
