contain-intrinsic-size 必须与 content-visibility: auto 配合使用，且仅对支持该属性的块级容器生效；table/tr 等表格元素不支持 content-visibility，故单独设置无效。
单独给 <table> 或 <code><tr> 加 <code>contain-intrinsic-size 没用——这个属性只对设置了 content-visibility: auto 的**块级容器元素**生效，而表格相关元素默认不是块级容器，也不支持 content-visibility。
为什么 table / tr 不能直接用 contain-intrinsic-size
contain-intrinsic-size 不是独立的“占位高度”声明，它必须和 content-visibility: auto 成对出现，且只作用于能触发内容可见性优化的元素。原生 <table>、<code><tbody>、<code><tr> 等在所有主流浏览器中都不支持 <code>content-visibility（CSSWG 明确将其列为「不适用」的 display 类型）。强行加会静默失效，DevTools 里也看不到效果。
常见错误现象包括：
- 写了
table { content-visibility: auto; contain-intrinsic-size: 40px; }，但滚动时依然跳变 - DevTools 中看到
content-visibility被划掉（invalid value） - 表格行高渲染正常，但父容器高度塌陷、滚动条缩回
想让长表格滚动稳定，得换结构
真正可行的做法是：把表格逻辑“降级”为语义化但可优化的块级结构，比如用 <div role="table"> 模拟表格，并确保每行是独立的、带 <code>content-visibility: auto 的块容器。
实操建议：
- 用
<div class="table" role="table"> 替代 <code><table>，内部用 <code><div class="row" role="row"> 替代 <code><tr> <li>每个 <code>.row必须显式设display: block（或默认值），才能被content-visibility识别 - 每个
.row同时加content-visibility: auto和contain-intrinsic-size，例如：contain-intrinsic-size: 48px - 避免在
.row上写height或min-height，否则会覆盖contain-intrinsic-size的高度预估 - 用 DevTools 测量几条典型行的真实高度（含所有 padding/margin/border），取中位数 → 比如 46px、48px、52px，中位数是 48px
- 保守一点，乘以 1.1～1.2 → 写成
contain-intrinsic-size: 54px - 如果某些行可能展开（如带详情折叠区），按最大可能高度设，比如
contain-intrinsic-size: 120px - 绝对不要写
contain-intrinsic-size: 0或contain-intrinsic-size: auto，Chrome/Safari 都当没写 - 不能依赖
flex: 1或100vh之类弹性值——它们在content-visibility下可能导致高度计算失准 - 若用
position: sticky表头，确保 sticky 容器本身不被content-visibility影响（表头应在外层，不参与延迟渲染）
contain-intrinsic-size 值怎么填才稳
表格行高度通常较固定，但需考虑字体、padding、border、行内元素（如图标、badge）带来的浮动。不能靠猜，也不能写 auto。
推荐做法：
滚动容器必须是块级且有明确 height
即使每行都配对了 content-visibility: auto + contain-intrinsic-size，如果外层滚动容器是 或没有 height/max-height 的 <div>，浏览器仍无法准确计算总滚动高度。
<p>关键点：</p>
<ul>
<li>滚动容器需设 <code>overflow-y: auto + 显式 height 或 max-height（比如 max-height: 600px）
真正难的不是加两行 CSS，而是让每一行的占位高度既足够稳定、又不过度浪费空间——尤其当表格混用文本、图标、状态 badge 时，微小的行高差异就会在快速滚动中被放大。别省那几行 JS 测量，先跑一遍真实数据再定值。
