content-visibility: auto 不能直接用于 或 ，因表格元素不支持 layout containment，浏览器会静默降级为 visible；有效方案是改用 css grid 模拟表格结构，并对每行 容器启用该属性，同时设置 contain-intrinsic-size。

content-visibility: auto 不能直接加在 <tr> 或 <code><td> 上——浏览器会静默忽略，实际无效。 <h3>为什么 <code><tr> 和 <code><td> 加了 <code>content-visibility: auto 没反应

表格元素有严格的布局依赖：行高、列宽、跨行合并（rowspan）、自动换行等都要求所有子元素参与计算。浏览器（Chrome 125+、Safari 17.4+）明确不支持对 display: table-row 或 display: table-cell 启用 layout containment，因此 content-visibility 被降级为 visible。

验证方式很简单：getComputedStyle(trElement).contentVisibility 返回 "visible"，DevTools 的 Computed 面板里也看不到 layout/paint 被跳过。

• 不要写：<tr style="content-visibility: auto; contain-intrinsic-size: 48px"><li>也不要写：<code><td style="content-visibility: auto"> <li>哪怕套了 <code>div 包裹 <tr> 再加该属性，也会破坏表格语义和屏幕阅读器行为，不推荐 <h3>真正能生效的替代结构：用 Grid 模拟表格 + <code>content-visibility

  当数据量大（如 > 5000 行）、且页面场景允许牺牲部分语义（如后台日志页、内部管理列表），可放弃原生 <table>，改用 CSS Grid 模拟表头+行结构，再对每“行”容器启用 <code>content-visibility: auto。

  关键约束必须满足：

  

  Html To Pdf

  使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

  下载
  • 每行必须是独立的 <div class="grid-row">，不能嵌套在 <code><table> 内 <li> <code>contain-intrinsic-size 必须设具体像素值，例如单行固定高 48px → contain-intrinsic-size: 48px
  • 横向列宽必须用 grid-template-columns 固定（如 120px 1fr 120px 80px），否则未渲染时列宽会重算错乱
  • 若内容易换行或列数多，建议用 contain-intrinsic-size: 800px 0（只占位宽度，高度由内容撑开）

  contain-intrinsic-size 设错比不设更危险

  这个值不是为了“精确还原”，而是给滚动容器提供安全占位依据。设小了会导致布局抖动、滚动条突然拉长、footer 上浮；设大了只是首屏密度略低，相对可控。

  • contain-intrinsic-size: auto 或留空 → 等同于没写，浏览器无视
  • contain-intrinsic-size: 0 → 布局彻底塌缩，比不设还糟
  • 子元素写了 height 或 min-height → 不会覆盖 contain-intrinsic-size，后者优先级更高
  • 高度差异大的场景（如富文本标题行数不定）：取最小可能高度 × 1.2，例如最小 120px → 写 144px

  兼容性和副作用必须提前踩坑

  content-visibility: auto 不是万能 display 替代品，加错位置会直接破坏功能。

  • 父容器有 overflow: hidden 且子元素需溢出展示 → content-visibility 强制 layout containment，直接截断
  • 含 position: fixed 子元素 → fixed 元素脱离定位上下文，飘到左上角
  • 用了 IntersectionObserver 或 ResizeObserver → 未渲染区域不会触发回调，需在切换为 visible 后手动补发
  • 服务端直出（SSR）页面 → 首屏 HTML 已含 DOM，但 JS 未执行，用户可能看到大片空白；应 SSR 时设 content-visibility: visible，hydration 后再切为 auto
  • Firefox 和 Safari（含 iOS）至今不支持 → 必须用 @supports (content-visibility: auto) 包裹，或 UA 检测降级

  表格语义和可访问性一旦被破坏，修复成本远高于性能收益；真要优化超大表格，优先考虑分页、懒加载或虚拟滚动，content-visibility 只在语义宽松、结构可控的模拟表格中才真正可用。