will-change 不能用于 html 表格元素的位移动画优化，因为 、、 不支持 transform 合成，加 will-change: transform 无效；必须用外层 wrapper 包裹表格并对 wrapper 应用 transform 和 will-change。
will-change 不能用于 HTML 表格的位移动画优化——因为表格元素（<table>、<code><tr>、<code><td>）本身不支持 <code>transform 合成，加了也无效。
为什么给 <table> 加 <code>will-change: transform 没用
浏览器只对能走合成线程的属性响应 will-change，而表格元素默认是「表格布局上下文」，其 transform 会触发整表重排（reflow），无法升层。DevTools 的 Layers 面板里根本不会出现对应图层，Reason 字段也不会显示 layer-for-transform。
<table>、<code><tr>、<code><td> 都不是「可合成元素」，即使强制写 <code>transform: translateX(10px)，也会退化为 paint + layout，will-change被忽略- 父级表格容器通常有
border-collapse、display: table等隐式约束，进一步压制图层提升 - 移动端 Safari 和旧版 Chrome 对表格元素的合成支持几乎为零
- 给
<table> 外层套一层 <code><div class="table-wrapper"> <li>对 wrapper 设置 <code>overflow: hidden（防止溢出破坏布局） - 动画只作用于 wrapper：
transform: translateX()或opacity - 此时才可在 JS 触发时动态设
wrapper.style.willChange = 'transform'
真正能生效的替代方案：用 wrapper 包裹再动
想让表格“动起来”，必须把动画目标从表格本身转移到一个支持合成的容器上：
示例关键代码：
<div class="table-wrapper" style="overflow: hidden;">
<table>...</table>
</div>
// JS 动画开始前
wrapper.style.willChange = 'transform';
// 动画结束后
wrapper.addEventListener('transitionend', () => {
wrapper.style.willChange = 'auto';
});
容易踩的坑：表格里直接改 left 或 top
有人试图给 <td> 加 <code>position: relative 再动 left，这完全走不通：
-
will-change: left浏览器直接无视，因为left强制触发布局 - 表格单元格的定位行为受表格算法约束，
left可能被忽略或导致错行 - 哪怕加上
transform: translateZ(0)降级兜底，表格内部仍无法独立升层
验证是否真起效的唯一方式
别信代码写了就有效。必须实测：
- 打开 Chrome DevTools → More Tools → Layers，手动触发动画
- 确认图层列表中出现的是
.table-wrapper，而非<table> 或 <code><td> <li>右键该图层 → Show layer borders，看边框是否包裹整个 wrapper 区域</li> <li>同时开启 Rendering → Paint flashing，动画期间只闪 wrapper 区域，表格内部不闪绿色</li> <p>表格结构决定了它天生不适合直接动画；<code>will-change不是补丁，而是对已有合成路径的预告——没有路径，预告毫无意义。
