表格单元格（td/th）上使用transition会抖动，因opacity等属性触发表格自动布局重算导致layout shift；width、height、padding、top、left、margin、display绝对不可过渡；仅opacity（小数）和transform（translatex/y、scale）安全。
transition 为什么在 table-cell 上会抖动
表格单元格（td、th）的尺寸和位置高度依赖表格自动布局算法，哪怕只对opacity加transition，也可能因父table重排间接触发 layout shift。真实场景中：transition: all .2s用在td上，悬停时整行高度跳变、文字模糊、相邻列宽度被“吸过去”——这不是动画慢，是浏览器每帧都在重算表格布局树。
哪些属性在表格里绝对不能 transition
以下写法都会强制重排，且无法通过will-change缓解：
-
width/height：表格会重新分配列宽/行高，影响所有同行同列元素 -
padding：改变单元格内边距 → 改变内容盒尺寸 → 触发表格重排 -
top/left/margin：表格元素不支持这些定位属性，但若父容器用了position: relative，子td设position: absolute再加top，仍会破坏表格结构 -
display（如table-cell↔block）：直接退出表格格式化上下文，布局彻底断裂
真正安全的过渡方案只有两个
表格里能稳定过渡的 CSS 属性，仅限于不参与布局计算的合成属性：
-
opacity：值必须是小数（opacity: 0.7），opacity: 70%无效 -
transform：仅限translateX()、translateY()、scale()；避免混写单位（如translate(50%, 10px)），部分浏览器插值异常
示例：给td加悬停缩放，必须这样写：
.data-cell {
transition: transform 0.25s ease, opacity 0.25s ease;
will-change: transform;
}
.data-cell:hover {
transform: scale(1.03);
opacity: 0.95;
}
注意：will-change: transform要加在常态规则里，不是:hover里；且不要给整张table加，只加在实际动画的单元格上。
更隐蔽的坑：伪元素 + 表格
表格里用::after画下划线或角标，如果写了display: block或float，它就参与文档流——宽度变化照样推挤td内容，导致整列微移。正确做法是：
- 给
td加position: relative -
::after设position: absolute，用left/bottom精确定位，不占空间 - 动画只走
transform: scaleX()或opacity，别碰width
表格布局本身就不适合复杂动画，一旦需要频繁重排或动态列宽，优先考虑用grid或flex重构容器，而不是硬调transition。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
