scroll-behavior: smooth 不支持表格元素，需用 display: block 的 div 包裹 tbody 并设 overflow-y: auto 和 scroll-behavior: smooth，再通过 scrollintoview({ behavior: 'smooth' }) 触发滚动。
scroll-behavior 不支持表格元素直接生效
scroll-behavior: smooth 只对「可滚动的块级容器」起作用，而 <table>、<code><tbody>、<code><tr> 等原生表格元素默认不是可滚动容器——它们不产生滚动上下文，即使设置了 <code>overflow: auto 也常被浏览器忽略（尤其在 <tbody> 上）。直接给 <code><table> 加 <code>scroll-behavior 完全无效。
必须用 div 包裹 tbody 并设为滚动容器
真正可行的做法是：把 <tbody> 替换为一个带固定高度和 <code>overflow-y: auto 的 <div>，再对这个 <code><div> 设置 <code>scroll-behavior: smooth。注意保持表格语义结构，用 role="rowgroup" 辅助可访问性。
关键点：
- 不能只靠 CSS 把
<tbody> 变成滚动区——它会被表格渲染模型压制 <li>包裹 <code><div> 必须设 <code>display: block，否则仍受表格 display 值影响 - 需手动设置
width: 100%和box-sizing: border-box避免宽度错位 - 滚动目标要用
element.scrollIntoView({ behavior: 'smooth' })触发，不能依赖锚点跳转
| Name | Score |
|---|---|
| Alice | 95 |
| Bob | 87 |
| Charlie | 92 |
然后 JS 调用：document.getElementById('target').scrollIntoView({ behavior: 'smooth' });
兼容性与表格线对齐问题
这个方案在 Chrome、Edge、Firefox 中都有效，但 Safari 对 scroll-behavior 在非根滚动容器中的支持稍晚（iOS 16.4+ / macOS 13.3+ 才稳定）。更隐蔽的问题是边框对齐：
- 包裹
<div> 会破坏 <code><table> 的原生边框合并（<code>border-collapse）逻辑 - 如果用了
border: 1px solid，需在<th>/<code><td> 上单独设边框，并用 <code>border-spacing: 0配合 - 固定列或表头悬浮时，
<thead> 需脱离文档流（如 <code>position: sticky），但要避免遮挡滚动内容替代方案：不用 scroll-behavior 也能平滑滚动
如果目标是点击某行后平滑定位，又不想改 HTML 结构，可以用
scrollTo+behavior: 'smooth'滚动到父容器（比如一个外层<div class="table-wrapper">）： <ul> <li>给表格外层加 <code>overflow: auto和scroll-behavior: smooth - 确保该容器高度受限，且表格本身足够高
- 此时
scrollIntoView会对这个外层容器生效，而非表格内部 - 缺点：滚动范围是整个表格，无法只滚
<tbody> 区域 <p>真正需要局部平滑滚动时，还是得接受用 <code><div> 替代 <code><tbody> 这个事实——表格语义和滚动控制在这里不可兼得。</tbody>
