使用外层容器包裹表格并设置水平滚动，可解决小屏幕下表格过宽问题。通过.table-container设置overflow-x: auto实现滚动，避免直接对table操作，配合white-space: nowrap防止换行，提升移动端体验；为增强提示，可加阴影或边框表明内容截断，iOS使用-webkit-overflow-scrolling: touch优化滑动。若列过多，可采堆叠布局、隐藏次要列或转为描述列表等方案，确保内容可访问且操作自然，简单有效，细节关键。
在小屏幕设备上，当表格内容过宽时，直接显示会导致布局错乱或内容被截断。为了让响应式表格在小屏幕上正常查看，可以通过 CSS 设置水平滚动来解决这个问题。
给表格容器添加滚动功能
不要直接对 table 元素设置滚动，而是用一个外层容器包裹表格，然后对容器设置固定宽度和溢出滚动。
示例代码：
<div class="table-container">
<table>
<thead>
<tr><th>姓名</th><th>年龄</th><th>城市</th><th>职业</th><th>薪资</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>28</td><td>北京</td><td>工程师</td><td>15000</td></tr>
<tr><td>李四</td><td>32</td><td>上海</td><td>设计师</td><td>12000</td></tr>
</tbody>
</table>
</div>
CSS 样式如下：
立即学习“前端免费学习笔记（深入）”；
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* 提升移动端滑动体验 */
}
<p>table {
width: 100%;
border-collapse: collapse;
white-space: nowrap; /<em> 防止文本换行，保持横向展开 </em>/
}</p><p>th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}</p>优化小屏幕显示效果
为了让用户更清楚地知道可以左右滑动，可添加一些视觉提示：
- 在容器底部加轻微阴影或边框，表示内容被截断
- 使用 white-space: nowrap 避免列被压缩换行
- 在 iOS 上启用 -webkit-overflow-scrolling: touch 让滚动更流畅
考虑更极致的移动适配方案
如果列数太多，即使滚动也影响体验，可考虑以下替代方式：
基本上就这些。最简单有效的做法是用外层容器包裹表格并开启横向滚动，适合大多数场景。关键是保证内容可访问、操作自然。不复杂但容易忽略细节。
