scroll-snap-align 不能直接用于 <tr> 或 <td> 元素，根本原因是浏览器仅对滚动容器的直接子元素应用该属性，而标准表格结构中 <tr> 并非滚动容器（如 <tbody>）的直接子级或有效滚动上下文；要实现行级吸附，须将 <tbody> 改为 display: block 并设 overflow-y: auto 和 scroll-snap-type: y mandatory，同时将 <tr> 设为 display: block 并应用 scroll-snap-align: start。
scroll-snap-align 不能直接用于 <tr> 或 <td> 元素——表格行本身不是可滚动容器的直接子元素，且原生表格结构不支持 scroll snap 行为。
scroll-snap-align 对 <tr> 无效的根本原因
浏览器只对**滚动容器的直接子元素**应用 scroll-snap-align。而标准 HTML 表格中：<table> 是块级容器，但它的直接子是 <thead>、<tbody>、<tfoot>；<tbody> 的直接子才是 <tr>。这意味着：<tr> 不是滚动容器的直接子，除非你把滚动行为显式加在 <tbody> 上，并确保它被当作独立滚动容器渲染。
更关键的是：<tbody> 默认是内部表格盒模型（display: table-row-group），不是块级流容器，overflow 在其上不触发标准滚动上下文，导致 scroll-snap-type 和 scroll-snap-align 被忽略。
- DevTools 中能看到
scroll-snap-align: start声明，但 computed styles 里值为空或未计算 - 给
<tr>加scroll-snap-align完全无 effect，因为父容器（<tbody>）不满足滚动前提 - 试图在
<table>上设scroll-snap-type更无效——<table>不是滚动容器，也不应是
可行方案：用 display: block 替代表格显示模式
要让行级滚动捕捉生效，必须放弃原生表格渲染模型，改用语义等价但布局可控的块级结构。核心是：构造一个真正的滚动容器，其直接子元素（即“行”）能响应 scroll-snap-align。
立即学习“前端免费学习笔记（深入）”；
- 将
<tbody>设为display: block; overflow-y: auto; height: 400px;（显式高度 + 溢出） - 将每个
<tr>改为display: block;，并设scroll-snap-align: start; - 将
<td>改为display: inline-block;或display: grid;实现列对齐（需配合width或grid-template-columns） - 容器（
<tbody>）必须设scroll-snap-type: y mandatory; - 避免用
table-layout: fixed或border-collapse等表格专属属性，它们会干扰块级渲染
示例关键 CSS：
tbody {
display: block;
overflow-y: auto;
height: 400px;
scroll-snap-type: y mandatory;
}
tr {
display: block;
scroll-snap-align: start;
}
td {
display: inline-block;
width: 25%; /* 或用 grid */
}为什么不用 <div> 模拟表格反而更可靠
即使强行 hack 表格元素，仍面临三类硬伤：
-
<tbody>在部分旧版 Firefox 中对overflow渲染不稳定，滚动条可能消失或错位 - 行高由
line-height和字体决定，scroll-snap-align: start的锚点易受padding、border影响，视觉停靠位置偏移 - 移动端 Safari 对
display: block表格元素的scroll-snap支持弱于纯<div>结构，尤其当内容动态加载时
更务实的做法是用 <div class="table"> + <div class="row"> + <div class="cell"> 结构，配 display: grid 或 flex 控制列宽。这样既能保证 scroll-snap-align 生效，又可自由控制每行尺寸、间距和吸附基准线（例如用 scroll-margin-top 微调）。
真机测试中最容易被忽略的细节
即使结构和样式都对，iOS Safari 上仍可能“滑过”某一行——这不是代码错误，而是 WebKit 滚动引擎对连续快速 flick 的惯性处理策略。此时：
- 不要依赖
scroll-snap-stop: always（它仅防跳过，不解决停不准） - 确保所有“行”元素高度严格一致（用
height，不用min-height） - 禁用
position: sticky头部（它会破坏滚动容器的 snap 上下文） - 真机上检查是否启用了
-webkit-overflow-scrolling: touch;（iOS 必需，但已废弃；现代 Safari 可省略，若失效再加）
最终效果是否吸附，不看 DevTools 样式面板，而要看手指松开后是否真的停在行边界——那才是唯一可信的判断依据。
