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"> 或 <code><td id="cell-2-3"> 这类带 <code>id 的子元素。

常见错误写法：table { scroll-margin-top: 48px; } ❌ —— <table> 几乎从不作为锚点目标，且其盒模型边界受 <code>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> 里的 <code><th> 一般不用作跳转目标，除非你明确给它设了 <code>id 并生成对应链接

  表头高度必须包含 border 和 padding，不能只看 CSS height

  吸顶表头的真实高度 ≠ 你写的 height: 40px。它可能还包含 padding-top: 8px、border-bottom: 2px solid #ccc，甚至 box-shadow 的垂直扩散（Safari 下尤其明显）。值差 1px，滚动后就可能遮住第一行文字。

  实操建议：

  • 打开 DevTools → 选中吸顶的 <th> 或 <code><tr> → 看右侧面板的 <strong>Computed</strong> → 找 <code>height 值（不是 Styles 里的声明值）
  • 把该数值设为 --sticky-header-height 变量，例如 :root { --sticky-header-height: 50px; }
  • 避免混用单位：如果表头用 rem 定义高度，scroll-margin-top 就别用 px，否则用户调大字体时偏移失效

  表格内滚动容器要明确，否则 scroll-margin-top 不触发

  普通页面中 html 是默认滚动容器，但表格常嵌在 <div class="table-wrapper"> 里，且这个 wrapper 设置了 <code>overflow: auto —— 那么它才是真正的滚动上下文，scroll-margin-top 只在它内部生效。

  此时必须同时做两件事：

  
  html-deploy
  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
  下载
  • 给 wrapper 加 scroll-padding-top: var(--sticky-header-height);（注意是 scroll-padding-top，不是 margin）
  • 确保目标 <tr id="target"> 在这个 wrapper 内部，且没有父级设 <code>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 执行了，若此时行高还没定型，最终位置依然不准。