表格列hover变色需为td/th批量加类并写transition在常态规则中，因col元素不渲染不响应hover；单单元格悬停变色必须将transition写在基础选择器而非:hover内，否则移出无动画。

transition 不能直接加在 上，表格整列变色必须靠给 和 批量加类 + 统一写 transition；单单元格悬停变色则必须把 transition 写在默认状态里，否则移出时会“啪”一下跳回。

为什么表格列 hover 变色加了 transition 还不生效？

因为 元素本身不渲染、不响应 :hover，浏览器压根不会触发它的样式变化。你写的 transition 没地方挂载，自然没动画。

• 所有视觉效果（包括背景色、过渡）最终都得落在实际渲染的元素上：即 和
• 要实现“整列”效果，必须为每行中同一列的单元格统一加 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 属性适合给表格做过渡？性能怎么选？

不是所有属性都能平滑过渡，更不是所有都适合表格场景。


htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
• 推荐优先用：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 就像没装弹药的枪。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！