scroll-margin-top 必须加在带 id 的表格行（tr）或单元格（td）上，而非 table 或 tbody；需配合 scroll-padding-top 设置滚动容器，并在动态渲染后手动调用 scrollIntoView。
scroll-margin-top 必须加在表格行或单元格上，不是 table 元素本身
表格里用 position: sticky 吸顶表头后，点击锚点跳转到某行仍被遮住，问题不在表头，而在目标行没告诉浏览器“我需要留白”。scroll-margin-top 只对实际被跳转的元素生效，而表格中可被锚点指向的通常是 <tr id="row-5"> 或 <td id="cell-2-3"> 这类带 id 的子元素。
常见错误写法：table { scroll-margin-top: 48px; } ❌ —— <table> 几乎从不作为锚点目标，且其盒模型边界受 border-collapse 影响，计算不可靠；tbody { scroll-margin-top: 48px; } ❌ —— 浏览器找不到匹配的 id，直接忽略。
- ✅ 正确做法：给每行加
id，再用选择器匹配，例如tr[id] { scroll-margin-top: var(--sticky-header-height); } - ✅ 更稳妥：如果只对特定几行启用锚点，直接写
#row-10, #row-25 { scroll-margin-top: 48px; } - ⚠️ 注意：
<thead>里的<th>一般不用作跳转目标，除非你明确给它设了id并生成对应链接
表头高度必须包含 border 和 padding，不能只看 CSS height
吸顶表头的真实高度 ≠ 你写的 height: 40px。它可能还包含 padding-top: 8px、border-bottom: 2px solid #ccc，甚至 box-shadow 的垂直扩散（Safari 下尤其明显）。值差 1px，滚动后就可能遮住第一行文字。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → 选中吸顶的
<th>或<tr>→ 看右侧面板的 Computed → 找height值（不是 Styles 里的声明值） - 把该数值设为
--sticky-header-height变量，例如:root { --sticky-header-height: 50px; } - 避免混用单位：如果表头用
rem定义高度，scroll-margin-top就别用px，否则用户调大字体时偏移失效
表格内滚动容器要明确，否则 scroll-margin-top 不触发
普通页面中 html 是默认滚动容器，但表格常嵌在 <div class="table-wrapper"> 里，且这个 wrapper 设置了 overflow: auto —— 那么它才是真正的滚动上下文，scroll-margin-top 只在它内部生效。
此时必须同时做两件事：
- 给 wrapper 加
scroll-padding-top: var(--sticky-header-height);（注意是scroll-padding-top，不是margin） - 确保目标
<tr id="target">在这个 wrapper 内部，且没有父级设overflow: hidden或display: none - 不要写
html { scroll-padding-top: 50px; }—— 如果滚动发生在 wrapper 内，html的设置完全不参与计算
动态渲染表格时，scroll-margin-top 生效但滚动时机不对
用 AJAX 或 React 渲染表格后，点击链接跳转到新插入的 #row-100，发现滚动停在空白处——不是样式没生效，而是浏览器在 DOM 插入前就执行了原生锚点滚动，目标行还没渲染出来。
这种场景下，scroll-margin-top 白写了。必须放弃原生跳转，改用手动控制：
- 拦截链接点击：
e.preventDefault() - 等表格数据渲染完成（React 用
useEffect，Vue 用nextTick，原生用MutationObserver或requestAnimationFrame） - 再调用：
document.getElementById("row-100")?.scrollIntoView({ block: "start", behavior: "smooth" }) -
block: "start"是关键，它会把目标顶部对齐滚动容器顶部，正好配合scroll-margin-top的偏移逻辑
最易被忽略的是：表格行高度由内容撑开，而内容（比如图片、异步加载的文本）可能比 DOM 节点晚几毫秒才稳定。哪怕 scrollIntoView 执行了，若此时行高还没定型，最终位置依然不准。
