scroll-margin 不能直接用于 table 及其子元素，因其几何边界计算不稳定；应将 id 设在 table 的父容器（如 section 或 div）上并设置 scroll-margin-top，才能可靠实现锚点偏移。
scroll-margin 不能直接用在 <table> 或其子元素上实现锚点偏移
表格元素（<table>、<tr>、<td>）本身不是可靠的锚点目标——浏览器对它们的 getBoundingClientRect() 计算常不稳定，尤其当表格有 border-collapse、display: table-cell 或动态渲染时。点击 #my-table 链接后滚动停不准，甚至完全不触发偏移，是常见现象。
真正生效的前提是：目标元素必须满足「可被滚动引擎精确测量几何边界」+「拥有独立的盒模型上下文」。而 <table> 的渲染行为（尤其是跨行/跨列单元格）会让 scroll-margin-top 被忽略或计算失真。
- ✅ 可靠做法：把
id放在<table>的**父容器**上，比如<div id="data-table-section"><table>...</table></div></li> <li>✅ 更稳妥：用语义化包裹层，如 <code><section id="financial-report"><h2>财报数据</h2><table>...</table></section>
，然后给section[id]设scroll-margin-top - ❌ 不要写：
table#data { scroll-margin-top: 64px; }—— 多数浏览器（特别是 Safari）会静默失效 - ❌ 避免给
<tr>或<th>加id并设scroll-margin—— 表格行/单元格没有独立滚动上下文，属性不参与定位计算
为什么 <table> 内部元素加 scroll-margin 基本无效
根本原因在于浏览器滚动定位引擎的工作机制：它依赖目标元素的 boundingClientRect.top 作为对齐基准点。而 <tr> 和 <td> 是「匿名盒」或「表格盒」，其 top 值在不同渲染阶段可能为 0 或 NaN，尤其在 CSS Grid / Flex 布局嵌套表格、或使用 position: sticky 表头时。
- Chrome 和 Firefox 对
tr[id]的支持极差，DevTools 中能看到样式声明，但 Computed 面板里scroll-margin-top显示为0px - Safari 直接跳过表格内部元素的
scroll-margin解析，哪怕你用了!important - 即使强制设置
display: block在<tr>上，也会破坏表格结构，导致边框/对齐错乱，得不偿失
表格场景下真正可用的 scroll-margin 实现方式
唯一稳定路径是「绕开表格本身，用语义容器承接锚点逻辑」。这不增加 JS，也不破坏可访问性，且兼容所有现代浏览器（Chrome 99+、Firefox 97+、Safari 15.4+）。
立即学习“前端免费学习笔记（深入）”；
- 给包裹
<table>的<div>或<section>加id，例如：<section id="q2-revenue"><h3>Q2 收入明细</h3><table>...</table></section> - CSS 写成：
section[id] { scroll-margin-top: var(--nav-height, 64px); }，配合:root { --nav-height: 64px; } - 如果表格需响应式高度变化（比如移动端隐藏部分列），用媒体查询覆盖变量：
@media (max-width: 768px) { :root { --nav-height: 48px; } } - 确保该
section没有overflow: hidden或display: none，否则滚动上下文被截断，scroll-margin完全不触发
SPA 中表格锚点跳转失败的典型原因和修复
单页应用里点击 #q2-revenue 后页面没滚动？不是 scroll-margin 问题，而是路由切换没触发浏览器原生滚动定位逻辑。
- React/Vue 默认用
history.pushState()更新 URL，但不会自动调用scrollIntoView() - 解决方案：监听
hashchange或路由onUpdated，手动执行：document.getElementById('q2-revenue')?.scrollIntoView({ block: 'start', behavior: 'smooth' }); - 注意时机：必须等表格 DOM 渲染完成（如 React 的
useEffect、Vue 的nextTick），否则getElementById返回null - 不要用
window.scrollTo()手动算offsetTop—— 表格高度动态变化时极易偏移错位，scrollIntoView才能尊重scroll-margin
scroll-margin 就能稳稳生效。真正容易被忽略的，是那个容器是否真正参与了滚动上下文——它得“活着”，得“可见”，还得“没被 overflow 截断”。 
