表格容器必须显式设置宽高，contain: layout paint 才生效；仅设 paint 无法阻止布局泄漏，absolute 子元素需以 wrapper 为包含块，且应通过 CSS class 而非 JS 动态添加 contain。
表格容器必须显式设宽高，否则 contain: layout paint 静默失效
浏览器对 table 或 div 包裹的表格（如 <div class="table-wrapper"><table>...</table></div>）启用 contain: layout paint 时，会严格检查其尺寸是否“可预测”。table 元素自身默认是 display: table，高度由行数、字体、padding 等动态撑开，height: auto 或 min-height: min-content 都不满足 containment 的边界要求。
常见现象：DevTools 中 getComputedStyle(el).contain 返回 "layout paint"，但 Paint Flashing 仍满屏闪烁，滚动或增删行时外层工具栏、分页器跟着重绘。
- ✅ 正确写法：
.table-wrapper { contain: layout paint; min-height: 300px; max-height: 600px; overflow-y: auto; } - ❌ 失效写法：
.table-wrapper { contain: layout paint; height: fit-content; }（Chrome 直接跳过隔离逻辑） - ⚠️ 注意：
table { contain: layout paint; }单独加在<table>上基本无效——它依赖父容器提供包含块和尺寸锚点，且table的盒模型本身不响应contain的 layout 约束
contain: layout paint 必须同时启用，单用 paint 挡不住表格行高变化
表格最典型的高频变更就是行展开/折叠、hover 高亮、状态列图标切换。只加 contain: paint 无法阻止这些操作引发的布局泄漏：比如点击展开某行，tr 高度突增，导致整个 table 高度变化，外层容器重排、滚动条跳动、相邻卡片错位。
layout 负责锁住子元素尺寸变化对外部的影响，paint 负责封住内部视觉更新的绘制扩散——二者缺一不可。
立即学习“前端免费学习笔记（深入）”；
- ✅ 同时启用：
.table-wrapper { contain: layout paint; }+ 显式min-height+overflow-y: auto - ❌ 只用
paint：.table-wrapper { contain: paint; }→ 行展开后外层仍重排 - ❌ 只用
layout：.table-wrapper { contain: layout; }→ hover 改背景色仍可能触发父级样式重算
表格内 position: absolute 子元素（如 tooltip、编辑浮层）需确保包含块为 wrapper
表格常配悬浮操作按钮、右键菜单、行内编辑弹窗，它们多用 position: absolute 定位。若包含块不是 .table-wrapper，而是 body 或更高层容器，这些元素会“逃逸”出 contain 边界，导致浏览器无法建立独立渲染上下文，paint 隔离直接失效。
典型表现：鼠标移入某单元格，tooltip 弹出瞬间，整页 Paint Flashing 闪一下；滚动表格时，tooltip 位置错乱甚至消失。
- ✅ 正确做法：给
.table-wrapper加position: relative，确保所有absolute子元素以它为定位上下文 - ✅ 浮层示例：
.row-actions { position: absolute; top: 4px; right: 8px; contain: paint; }（注意：paint对绝对定位子元素有效，layout会因脱离文档流而降级） - ❌ 错误结构：
<body> <div class="table-wrapper">...</div> <div class="tooltip">...</div> </body>—— tooltip 在 wrapper 外，完全不受 containment 约束
React/Vue 中动态渲染表格时，别在 mounted 后 JS 设置 contain
框架中表格数据常通过异步加载或状态驱动渲染。若在 mounted（Vue）或 useEffect（React）里执行 el.style.contain = 'layout paint'，此时 DOM 已完成首次 layout，浏览器不会回溯重建隔离边界——值写了，但没生效。
更糟的是，如果表格高度随数据动态变化（比如虚拟滚动），反复 toggle contain 会强制重建渲染树，帧率反而暴跌。
- ✅ 推荐方案：用 class 控制，例如
<div class="table-wrapper table-wrapper--contained">，CSS 中提前声明.table-wrapper--contained { contain: layout paint; min-height: 300px; } - ✅ 兜底检测：
if ('contain' in document.documentElement.style) { /* 加 class */ }，避免 Safari 15.3 或 iOS 微信 X5 内核报错 - ❌ 避免操作：
requestAnimationFrame(() => { el.style.contain = 'layout paint'; })—— 时机晚、无意义、还可能触发 layout thrashing
真正容易被忽略的是：contain 不是“开关”，而是你向浏览器做出的尺寸承诺。表格一旦加了 contain: layout paint，就得保证它的高度边界稳定——哪怕内容空，也要有 min-height；哪怕行数暴增，也要靠 max-height + overflow-y: auto 把它框死。否则，浏览器连“隔离”这件事都不会开始做。
