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