表格容器必须设min-height和max-height才能激活contain，因原生table高度由内容动态撑开，height:auto不满足尺寸承诺要求，直接加contain:layout paint会被浏览器静默忽略。

表格容器必须设 min-height 和 max-height 才能激活 contain

直接给 <table> 或 <code><tbody> 加 <code>contain: layout paint 几乎一定失效——浏览器会静默忽略，因为表格默认高度由行数和内容动态撑开，height: auto 不满足 containment 的尺寸承诺要求。

常见错误写法：table { contain: layout paint; }，控制台查 getComputedStyle(table).contain 虽返回 "layout paint"，但 Paint Flashing 仍外溢到页脚或工具栏。

• ✅ 正确做法：用包裹层（如 <div class="table-wrapper">）替代原生表格容器，并设 <code>min-height: 240px; max-height: 600px; overflow-y: auto;
• ✅ 表格本身需设 width: 100%; table-layout: fixed;，防止列宽随内容抖动触发重排
• ❌ 避免在 <tr> 或 <code><td> 上加 <code>contain：它们不是独立渲染上下文起点，加了无效甚至破坏行盒计算

  为什么只加 paint 或只加 layout 对表格完全没用

  表格重绘扩散常同时含两类变更：单元格背景色切换（纯绘制）、行插入/删除或内容换行（布局变化）。单值隔离无法覆盖全链路。

  • 只加 contain: paint：新插入一行或某单元格文字换行撑高行高，<tbody> 高度突变 → 外部滚动条跳动、相邻卡片重排 <li>只加 <code>contain: layout：点击高亮某行时 background-color 变更，仍会触发整页样式重算，尤其当表格嵌套在 flex 容器中时
  • ✅ 必须共用：contain: layout paint 才能锁住行盒尺寸传播 + 限制作画区域，让光标悬停、排序箭头切换、选中态更新都严格限制在 wrapper 内框中

  哪些表格子元素会绕过 contain 隔离

  即使 wrapper 设置正确，某些内联行为仍会让浏览器放弃隔离边界，典型包括：

  
  使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
  如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
  下载
  • position: absolute 的排序下拉菜单：若其 top 计算依赖 window.scrollY 或外部容器高度，layout 隔离会切断该依赖，导致菜单位置偏移
  • position: sticky 表头：Chrome 对 contain: layout paint 下的 sticky 元素支持不稳定，建议改用 position: relative + transform: translateY() 模拟
  • 未设 max-width 的长文本单元格：内容溢出后触发 white-space: normal 换行，撑高整行 → 父 wrapper 高度失准，隔离失效
  • 动态加载的图片或 SVG：若未设固定 width/height，加载完成瞬间尺寸变化会突破 layout 边界

  验证表格 contain 是否真生效的唯一方式

  别信 CSS 声明写了、控制台查得到。真实效果只能靠渲染行为验证：

  • 打开 Chrome DevTools → Rendering 面板 → 勾选 Paint Flashing，然后滚动表格、点击排序、输入筛选关键词 —— 闪光必须严格限制在 .table-wrapper 的 border-box 内，不波及上方搜索框或下方分页栏
  • Performance 面板录制一次滚动操作，对比开启前后 Layout 和 Update Layer Tree 时间：下降 30%+ 才算有效
  • 对表格执行 innerHTML = "..." 替换整张表后，检查是否触发父级重排：若页脚跟着跳动，说明 wrapper 尺寸没锁死或 contain 根本没生效

  最容易被忽略的是：JS 动态插入行前，必须确保 wrapper 已有稳定尺寸并已应用 contain；删行后若高度收缩，记得同步调整 max-height 或清空 style.contain，否则可能残留错误的 size 锁定。