scroll-padding-top必须写在html或局部滚动容器上，不能写在table、thead等非滚动元素上；其值须等于固定表头真实视觉高度，并避免与scroll-margin-top叠加。
scroll-padding-top 对表格本身无效，别往 table 或 thead 上写
表格不是滚动容器，scroll-padding-top 只对实际承载滚动行为的容器生效。你在 table、thead 或某个 tr 上设置它，浏览器直接忽略——这不是 bug，是规范行为。常见错误包括：table { scroll-padding-top: 48px; }、thead { scroll-padding-top: 48px; }，全都不起作用。
真正有效的滚动容器，绝大多数情况下是 html 元素；只有当你手动给某个父容器（比如 div.table-container）加了 overflow-y: auto，它才成为局部滚动上下文，此时 scroll-padding-top 才该写在那个 div 上。
表格内容被遮挡？先确认滚动容器是不是 html
如果表格是全页高度、靠页面自然滚动展示的（即没包在带 overflow 的 div 里），那锚点跳转或 scrollIntoView() 的滚动目标始终是 html。这时候必须写：
html { scroll-padding-top: 64px; }
值 64px 要严格等于你固定表头（或顶部导航栏）的**真实视觉高度**，含 border-top、padding-top、box-shadow 等所有向上延伸部分。打开 DevTools → 选中表头元素 → 查 Computed 面板里的「height + padding-top + border-top-width」总和，这才是真值。
立即学习“前端免费学习笔记（深入）”；
- 别用
%单位——scroll-padding-top中的百分比按视口宽度计算，不是高度，结果不可控 - 移动端表头折叠后变矮？用媒体查询联动：
@media (max-width: 768px) { html { scroll-padding-top: 48px; } } - 若同时用了
scroll-margin-top（比如给某行加了），两者会叠加，导致滚过头
局部滚动表格：scroll-padding-top 必须写在容器上
如果你的表格被包在一个 div class="table-wrapper" 里，且设置了 overflow-y: auto，那滚动行为就局限在这个 div 内部。此时 html 不再参与这次滚动，scroll-padding-top 必须写在 .table-wrapper 上：
.table-wrapper { scroll-padding-top: 40px; }
注意两点：
- 锚点必须在该容器内部（比如
<tr id="row-10">），不能跨出容器范围；外部 href="#row-10" 在局部滚动容器里通常不生效 - 如果容器用了
overflow: hidden，scroll-padding-top会被直接禁用——这是线上故障最常踩的坑 - 别试图在
tbody或tr上设该属性，它们不是滚动容器，写了也白写
固定表头（position: sticky）会让 scroll-padding-top 失效
很多“固定表头”其实是用 thead { position: sticky; top: 0; } 实现的。这种方案下，scroll-padding-top 会失效——因为 sticky 的占位高度随滚动动态变化，而 scroll-padding-top 是静态偏移，无法响应。
可行解法只有两个：
- 改用
position: fixed实现表头，并确保它脱离文档流后不影响表格结构（通常需额外 wrapper 定位） - 放弃
scroll-padding-top，改用scroll-margin-top直接作用于目标tr或td：tr[id] { scroll-margin-top: 40px; }
真正容易被忽略的是：这个属性只修正滚动终点，不改变任何布局。如果你设了还是遮挡，第一反应不该是加 JS，而是检查是否误加了 overflow: hidden，或者表头真实高度算错了——这两个问题占了线上故障的八成以上。
