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