scroll-padding-top 必须写在滚动容器（html 或局部 overflow 容器）上，对 table 等非滚动元素无效；值需严格匹配固定表头实际占位高度（含 padding、border、box-shadow），单位用 px/rem，避免 sticky 表头和 overflow:hidden 干扰。
scroll-padding-top 必须写在 html 或局部滚动容器上，不能写在 table 上
表格本身不是滚动容器，scroll-padding-top 对 table、thead、tr 等元素完全无效——浏览器直接忽略，这不是 bug，是规范行为。你看到“没效果”，大概率是因为写错了位置。
真正起作用的只有两类容器：
- 全页自然滚动时：根滚动容器是
html元素，必须写html { scroll-padding-top: 64px; } - 局部滚动表格（比如包在
div.table-wrapper里且设了overflow-y: auto）：滚动行为局限在该div内，此时要写.table-wrapper { scroll-padding-top: 40px; }
常见错误包括：table { scroll-padding-top: 48px; }、thead { scroll-padding-top: 48px; }，全都不生效。
值必须等于固定表头的视觉总高度，不是 CSS height
scroll-padding-top 的数值必须严格匹配你固定表头（或顶部导航栏）在页面中实际占据的垂直空间，包括：
立即学习“前端免费学习笔记（深入）”；
-
height（内容区高） -
padding-top和padding-bottom（如果影响整体占位） -
border-top-width和border-bottom-width -
box-shadow向上扩散部分（尤其带blur的阴影）
别信文档里写的 “64px” 或 Bootstrap 默认值。打开 DevTools → 选中表头元素 → 查 Computed 面板里的「height + padding-top + border-top-width」总和，才是真值。单位必须用 px 或 rem，% 按视口宽度计算，结果不可控。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
position: sticky 表头会让 scroll-padding-top 失效
很多“固定表头”用的是 position: sticky，但它会导致 scroll-padding-top 静默失效。原因在于：sticky 元素在滚动中动态吸附，其占位高度随状态变化，而 scroll-padding-top 是静态偏移，无法响应这种切换。
最稳解法是把表头改成 position: fixed；次选方案是放弃 scroll-padding-top，改用 scroll-margin-top 加在目标行上（如 tr[id] { scroll-margin-top: 48px; }），但注意锚点必须在滚动容器内有效。
别试图用 JS 动态改 scroll-padding-top 值——它不支持运行时重计算，改了也白改。
局部滚动容器里 overflow: hidden 会禁用 scroll-padding-top
如果你的表格被包在 div.table-wrapper 里，且该 div 同时设置了 overflow: hidden，那 scroll-padding-top 会被直接禁用——这是线上故障最高频的坑。
检查点：
- 确认滚动容器是否真有
overflow-y: auto或scroll，而不是hidden - 确认锚点（如
tr#row-100）确实在该容器内部，外部href="#row-100"在局部滚动里通常不生效 - 确认没有其他样式（比如编辑器注入的 inline style）覆盖了
scroll-padding-top
真正难的不是写代码，而是测出那个“刚好不遮、不多留”的像素值——它取决于你当前设备、缩放比例、甚至字体渲染差异，DevTools 的 Computed 面板里看到的才是唯一可信来源。
