为表格行添加ID必须直接设在<tr>标签上，如<tr id="row-12">，才能被href="#row-12"正确锚点定位；ID须唯一、不以数字开头、严格大小写匹配，且目标行需已渲染、未被overflow: hidden等CSS截断滚动上下文。
表格行加 id 是可行的，但必须加在 <tr> 上
直接给 <tr> 元素加 id 属性，是让锚点跳转到某一行最干净的方式。浏览器会把该 <tr> 的顶部对齐视口顶部——前提是它没被 CSS 干扰。
-
<tr id="row-12"><td>数据</td></tr>✅ 正确，可被href="#row-12"定位 -
<td id="row-12">数据</td>❌ 不推荐，<td>高度可能极小，滚动后几乎看不见目标 -
<table><tbody><tr><td><span id="row-12">...</span></td></tr></tbody></table>❌ 无效，scrollIntoView或原生锚点不会识别嵌套过深的id作为滚动锚点目标（除非手动调用）
注意：id 值不能以数字开头（如 id="12-row" 在 Safari 15.4 之前会失效），建议用 id="row-12" 或 id="data-row-007"。
href="#row-12" 点击没反应？先查这三件事
常见现象是地址栏变了、hash 更新了，但页面不动——不是代码写错，而是底层条件不满足。
- 目标
<tr>是否已存在于 DOM 中？AJAX 加载或 React/Vue 动态渲染的表格，若点击时tr#row-12还没挂载，浏览器找不到目标，静默失败 - 表格是否被包裹在
overflow: hidden或position: relative+transform的容器里？这类 CSS 会截断或扭曲滚动上下文，导致锚点定位失效 -
href值是否严格匹配？href="#Row-12"≠id="row-12"（大小写敏感），也不能多空格或特殊字符（如href="#row 12"）
固定表头或导航栏遮挡 <tr> 怎么办
浏览器默认滚动到 <tr> 顶部，但表格常配合 position: sticky 表头或全局 fixed 导航栏，结果目标行被盖住。
立即学习“前端免费学习笔记（深入）”；
- 最简解法：给目标
<tr>加 CSSscroll-margin-top: 64px（数值 = 表头高度），例如：tr[id] { scroll-margin-top: 64px; } - 兼容旧浏览器（如 IE）：改用 JS 主动滚动，且必须指定
block: 'start'避免被 sticky 头部切掉顶部document.getElementById('row-12').scrollIntoView({ behavior: 'smooth', block: 'start' }); - 别用负 margin/padding 模拟偏移——容易破坏表格行高、边框对齐和响应式表现
单页应用（React/Vue）中表格锚点容易失效的根本原因
路由切换后，旧表格 DOM 被卸载，新表格异步渲染，但用户可能已在 URL 中带 hash（如 #row-42），此时原生锚点机制无从查找目标元素。
- 不能依赖页面加载完就自动跳转：需在组件
mounted（Vue）或useEffect（React）中监听当前 URL hash，并手动触发scrollIntoView - 避免重复滚动：检查
document.getElementById(hash.slice(1))是否存在再执行，否则报错 - 如果表格支持分页，
row-42可能不在当前页——此时应先跳转分页，等 DOM 就绪后再滚动，顺序不能颠倒
真正麻烦的从来不是怎么写 id，而是动态场景下目标元素“存在却不可见”、或“可见却不在当前 DOM 树里”。
