横向滚动需用带 overflow-x: auto 和 width: 100% 的 div 包裹 table；小屏下设 table-layout: fixed、th/td white-space: nowrap；iOS 需 -webkit-overflow-scrolling: touch 并避免 transform 等禁用滚动加速的属性。
给表格容器加 overflow-x: auto
表格本身不能直接横向滚动，必须用一个父容器包裹它，再对这个容器启用横向滚动。关键不是给 <table> 加样式，而是给它的外层 <code><div> 设 <code>overflow-x: auto 和 width: 100%。
- 容器必须有明确宽度限制（比如
width: 100%），否则overflow不生效 - 避免在容器上设
white-space: nowrap，这会让文字不换行、撑得更宽 - 移动端 Safari 对
overflow-x: auto支持良好，但需确保容器不是display: inline或未触发 BFC
<div style="overflow-x: auto; width: 100%;"> <table>...</table> </div>
媒体查询中禁用表格自动换行和缩放
小屏下浏览器可能默认压缩表格或让单元格内联元素折行，导致布局错乱。要用媒体查询主动干预。
- 给
<th> 和 <code><td> 设 <code>white-space: nowrap，防止文字断行破坏列宽 - 禁用
table-layout: auto的默认行为，改用table-layout: fixed，让列宽可控 - 避免用
font-size: smaller或zoom缩放表格——这会模糊文字且不可访问
@media (max-width: 768px) {
table {
table-layout: fixed;
width: 100%;
}
th, td {
white-space: nowrap;
padding: 8px 6px;
}
}
处理固定表头时的滚动冲突
如果表格有固定表头（position: sticky），横向滚动时表头可能错位或卡住。这不是 bug，是 sticky 在 overflow 容器里的限制。
-
position: sticky在overflow-x: auto的父容器里仍可工作，但要求父容器不能是transform或will-change触发的层叠上下文 - 表头单元格建议统一设
min-width（如min-width: 120px），避免被压缩到看不见 - 不要对
<thead> 单独套滚动容器——会导致表头和内容不同步 <h3>iOS Safari 滚动卡顿和弹性回弹问题</h3> <p>iOS 上 <code>overflow-x: auto容器常出现滚动迟滞、回弹过猛、无法拖拽等问题，本质是 Safari 对非 body 滚动区域的优化不足。立即学习“前端免费学习笔记（深入）”；
- 加
-webkit-overflow-scrolling: touch（仅 iOS 旧版必需，iOS 16+ 已弃用但无害） - 避免在该容器上使用
transform、filter或backdrop-filter，这些会禁用原生滚动加速 - 若仍卡顿，可尝试给容器加
will-change: scroll-position，但仅在必要时启用——它会强制创建图层，增加内存开销
- 加
