移动端表格横向滚动需打断默认宽度传播：外层容器设max-width、height/max-height、-webkit-overflow-scrolling: touch及touch-action: pan-x；table设display: block、min-width: max-content或white-space: nowrap；th/td加white-space: nowrap；列宽用min-width固定；可访问性需用ARIA或卡片式降级。
让表格在移动端小屏幕正常横向滚动，关键不是“加个 overflow 就完事”，而是打断表格默认的宽度传播逻辑，并适配各平台的渲染特性。iOS Safari 和部分安卓 WebView 对横向 touch 滚动支持弱，直接写 overflow-x: auto 很可能没反应或卡顿。
外层容器必须设明确尺寸和滚动行为
不能只靠 overflow-x: auto，容器需同时满足以下条件：
- 设
max-width: 100%或具体宽度（如width: 100vw），避免弹性上下文导致宽度计算失效 - 必须设
height或max-height（哪怕只是max-height: 50vh），否则 iOS Safari 不触发-webkit-overflow-scrolling: touch - 加上
-webkit-overflow-scrolling: touch—— 这是 iOS 12–15 的刚需，不加大概率拖不动 - 补上
touch-action: pan-x，防止浏览器误判为缩放手势而拦截滑动 - 避免同时写
overflow: scroll和overflow-x: auto，iOS 会优先按前者处理，忽略 x 方向控制
表格本身要脱离原生渲染流
<table> 是独立格式化上下文，不加干预就永远撑宽父容器。必须主动切断：
- 给
<table>加display: block，让它响应外部 overflow - 设
min-width: max-content（现代浏览器）或min-width: 100%+white-space: nowrap（兼容旧 Android） - 绝对不要写
width: 100%，它会让表格反向拉伸填满容器，彻底失去溢出前提 - 所有
<th>和<td>加white-space: nowrap，防止文本换行破坏宽度计算
表头对齐与列宽控制
display: block 后 <thead> 和 <tbody> 脱离表格布局，列容易错位：
立即学习“前端免费学习笔记（深入）”；
- 为每列的
<th>和对应<td>设置相同min-width（如min-width: 120px），不依赖百分比 - 若需固定表头，
position: sticky必须同时作用于<th>和该列所有<td>，且显式设z-index和背景色 - 避免
table-layout: fixed配合百分比宽度——小屏下压缩严重，字段不可读
可访问性与降级方案
一旦加 display: block，屏幕阅读器就无法识别表格语义：
- 若数据有强行列关联（如财务、课表），建议改用
<div role="table">手动重建 ARIA 结构 - 至少保留
role="columnheader"和aria-labelledby显式绑定关系 - 更稳妥的降级方式：用
@media (max-width: 768px)切换为卡片式布局，每行转成一个<div class="card">，用data-label标注原列名
