HTML表格无法直接使用scroll-snap-type实现单元格吸附，因默认display: table不形成BFC且不支持overflow滚动，/非滚动容器直接子元素，scroll-snap-align被忽略；需改用grid或flex布局模拟表格并满足滚动吸附三要素。
HTML 表格本身无法直接用 浏览器对表格元素的渲染有特殊规则： 常见错误现象： 想让“类似表格”的结构支持单元格级吸附，必须放弃原生 示例关键 CSS： 如果目标是每次滚动只对齐一个 注意：这种结构下“行列关系”需靠 CSS Grid 或 JS 维护视觉对齐，纯 HTML 不再表达二维语义。 iOS Safari 对 真机测试不可省略，尤其在 Safari 和 Android WebView 中——吸附是否“卡住”，只看手指松开后的最终停靠点，不是滚动过程中的视觉反馈。scroll-snap-type 实现单元格吸附对齐——因为 <table> 及其 <code><tr>/<code><td> 不是合法的 scroll snap 容器或可吸附子元素。<h3>为什么 <code><table> 不能直接套用 <code>scroll-snap-type<table> 默认是 <code>display: table，不形成独立的块级格式化上下文（BFC），且不支持 overflow 滚动行为（除非显式设为 display: block 并破坏表格语义）；<tr> 和 <code><td> 更不是滚动容器的“直接子元素”语义节点，<code>scroll-snap-align 在它们身上完全被忽略。scroll-snap-type: x mandatory 写在 <table> 上，DevTools 显示声明存在，但 computed styles 中 <code>scroll-snap-type 为空——这就是语义不匹配的明确信号。<table> 无法同时满足 scroll snap 三要素：固定尺寸 + <code>overflow + 可滚动内容流<tr> 不是块级容器的直接子元素，<code>scroll-snap-align 不生效display: block 改写表格，也会丢失表头对齐、列宽自动分配等核心表格能力替代方案：用
display: grid 或 flex 模拟表格布局 + scroll snap<table>，改用语义清晰、滚动可控的布局方式。最稳妥的是 <code>display: grid：
scroll-snap-type: x mandatory、overflow-x: auto、width 固定display: grid + grid-template-columns 控制列宽，保证列对齐<div class="cell">），并设 <code>scroll-snap-align: start（水平滚动时左对齐）scroll-snap-align 只对滚动容器的**直接子元素**生效，中间加一层 wrapper 就失效.scroll-table {
width: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
}
.scroll-row {
display: grid;
grid-template-columns: 120px 1fr 80px;
gap: 8px;
scroll-snap-align: start; /* 这一行整体作为吸附单位 */
}
.cell {
padding: 8px 12px;
border: 1px solid #ddd;
}
横向滚动时如何让单个“单元格”而非整行吸附
<td> 级别的单元格（比如数据看板中逐列浏览），就不能把整行当吸附单位。此时需扁平化结构：<ul><li>不用 <code><tr>/<code><td>，改用一维列表：<code><div class="cell">A1</div>
<div class="cell">B1</div>
<div class="cell">C1</div>
<div class="cell">A2</div>…display: flex + overflow-x: auto + scroll-snap-type: x mandatory
.cell 设 flex: 0 0 120px（固定宽度）+ scroll-snap-align: start
scroll-margin-left 微调吸附基准线，避免边框或 padding 干扰对齐位置容易被忽略的兼容性与精度问题
scroll-snap-type: x mandatory 的强制吸附并不绝对——快速滑动后松手，仍可能停在两个单元格之间。这不是 bug，是 WebKit 对滚动惯性的主动妥协：
.cell 宽度严格一致（用 flex-basis 或 width，别混用 min-width）transform 或 position: sticky，它们会干扰 snap 坐标计算scroll-margin 必须显式设为 0（如 scroll-margin-left: 0），否则默认边距会让吸附点偏移scroll-snap-type: both mandatory 支持不稳定，始终指定单轴（x mandatory 或 y mandatory）
