移动端表格横向滚动的正确做法是用容器包裹并启用 overflow-x: auto，而非缩放表格；需设容器为 display: block、加 -webkit-overflow-scrolling: touch 提升 iOS 流畅度，且表格不设 width: 100%，推荐加 min-width 和 border-collapse 优化显示。
让表格在手机端支持横向滚动，核心思路是用容器限制宽度并启用水平滚动，而不是直接给 <table> 加样式。原生表格本身不具备响应式缩放能力，强行缩放会导致文字过小、可读性差，横向滚动才是移动端显示宽表格的合理方案。
用外层容器包裹表格并启用 overflow-x
这是最常用也最可靠的做法：把 <table> 放进一个固定宽度（如 100%）且设置 overflow-x: auto 的容器中。这样当表格内容超出容器宽度时，就会出现横向滚动条。
- 容器需设
display: block（默认就是），否则overflow可能不生效 - 推荐加
-webkit-overflow-scrolling: touch提升 iOS 滚动流畅度 - 避免给
<table>设width: 100%，否则会撑满容器、失去滚动意义
HTML 结构示例（简洁有效）
直接套一层 <div class="table-responsive"> 即可：
<table>
<thead><tr><th>姓名</th><th>邮箱</th><th>部门</th><th>入职时间</th><th>薪资</th></tr></thead>
<tbody><tr><td>张三</td><td>zhang@example.com</td><td>前端</td><td>2022-03-15</td><td>18000</td></tr></tbody>
</table>
</div>
CSS 样式关键代码
只需几行 CSS 就能生效：
立即学习“前端免费学习笔记（深入）”；
.table-responsive {overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
min-width: 600px; /* 确保足够宽才触发滚动，避免小屏误触发 */
border-collapse: collapse;
}
注意：min-width 不是必须，但加上能防止极窄屏幕（如竖屏 iPhone）下无意义滚动；border-collapse: collapse 是为了视觉整洁，和响应式无关但常配套使用。
补充优化点（提升体验）
滚动本身解决了显示问题，但还可进一步优化交互和视觉：
- 给
<th>和<td>设最小宽度（如min-width: 120px），防止文字挤成一团 - 加
white-space: nowrap防止单元格内文字换行，保持列对齐 - iOS 上若滚动卡顿，可加
transform: translateZ(0)触发硬件加速 - 避免在表格内嵌套复杂组件（如按钮、下拉框），它们可能影响触摸滚动行为
不复杂但容易忽略
