表格列hover变色需为td/th批量加类并写transition在常态规则中，因col元素不渲染不响应hover；单单元格悬停变色必须将transition写在基础选择器而非:hover内，否则移出无动画。
transition 不能直接加在 <col> 上，表格整列变色必须靠给 <td> 和 <th> 批量加类 + 统一写 transition；单单元格悬停变色则必须把 transition 写在默认状态里，否则移出时会“啪”一下跳回。
为什么表格列 hover 变色加了 transition 还不生效？
因为 <col> 元素本身不渲染、不响应 :hover，浏览器压根不会触发它的样式变化。你写的 transition 没地方挂载，自然没动画。
- 所有视觉效果（包括背景色、过渡）最终都得落在实际渲染的元素上：即
<td>和<th> - 要实现“整列”效果，必须为每行中同一列的单元格统一加 class，比如
col-2 - 然后在 CSS 中写：
.col-2 { background-color: #fff; transition: background-color 0.25s ease; }和.col-2:hover { background-color: #e6f7ff; } - 别用
table:hover .col-2这种写法——鼠标移到表格任意位置都会高亮整列，失去“悬停到哪列才变哪列”的精确控制
单个表格单元格悬停变色，transition 写在哪？
必须写在基础选择器里，而不是 :hover 块内。这是最常踩的坑。
- 错误写法：
td:hover { background-color: #007acc; transition: background-color 0.3s; }→ 移出时无过渡 - 正确写法：
td { background-color: #fff; transition: background-color 0.3s ease; } td:hover { background-color: #007acc; } - 确保基础态有明确的
background-color值（哪怕是transparent），否则浏览器可能从“无值”开始插值，导致动画起点不可控 - 如果表格用了
border-collapse: collapse，记得给td加background-clip: padding-box，避免边框重叠干扰颜色过渡边界
哪些 CSS 属性适合给表格做过渡？性能怎么选？
不是所有属性都能平滑过渡，更不是所有都适合表格场景。
立即学习“前端免费学习笔记（深入）”；
- 推荐优先用：
background-color（语义清晰）、opacity（性能好，但只适合整体淡入淡出）、transform（如scale(1.02)，触发 GPU 加速，不触发重排） - 慎用：
width/height—— 表格布局下容易引发强制同步重排（layout thrashing），卡顿明显 - 禁用：
display（无法过渡）、z-index（不可动画）、margin/padding（虽可动但会推挤其他单元格，破坏表格结构） - 想做展开/收起？用
max-height+overflow: hidden，但必须设具体数值（如0 → 200px），不能用auto
transition 失效的三个高频原因
写了却没动画，大概率是以下其一。
-
background-color值格式不一致：比如基础态是#fff，hover 态是rgb(240, 240, 240)，浏览器无法插值 → 统一用 hex 或 hsl - CSS 优先级被覆盖：检查是否被更具体的规则（如内联 style 或
!important）干掉了transition声明 - 状态变化未触发重绘：比如只改了
color但单元格没文本，或改了background-color但父容器有background-image盖住了它
表格动画最容易被忽略的是「初始值显式声明」——哪怕你只想让 hover 时变色，也得先给默认态写清楚 background-color，不然 transition 就像没装弹药的枪。
