默认表格在小屏幕会因内部单元格布局机制导致挤压混乱，使用 display: block 与 overflow-x: auto 可让外层容器横向滚动，避免布局破坏。通过为 table 父容器设置 display: block、overflow-x: auto 和 min-width，确保表格在窄屏下可滑动查看，同时保持结构完整。配合阴影提示或媒体查询切换为卡片布局，能进一步优化移动端体验，该方法简单有效，适合初学者实现响应式表格。
在CSS初级项目中，制作响应式表格的关键是让宽表格在小屏幕上可横向滚动，同时保持布局不被破坏。使用 display: block 与 overflow-x: auto 结合是一种简单有效的做法。
为什么默认表格在小屏幕会出问题？
HTML 表格（table）默认是块级元素，但其内部单元格的布局机制在窄屏下容易导致内容挤压、换行混乱或溢出容器。简单的百分比宽度无法解决列宽自适应问题。
用 display: block 控制容器行为
将 table 的父容器设置为 display: block 并允许横向滚动，可以避免表格破坏页面布局。
实际做法是：给表格外层包裹一个 div，并对这个 div 应用以下样式：
立即学习“前端免费学习笔记（深入）”；
- 设置 display: block
- 添加 overflow-x: auto，让内容横向滚动
- 确保容器宽度不超过父元素（如设为 100%）
示例代码：
<div style="display: block; overflow-x: auto; width: 100%;">
<table style="width: 100%; min-width: 600px; border-collapse: collapse;">
<tr>
<th style="border: 1px solid #ccc; padding: 8px;">姓名</th>
<th style="border: 1px solid #ccc; padding: 8px;">年龄</th>
<th style="border: 1px solid #ccc; padding: 8px;">城市</th>
<th style="border: 1px solid #ccc; padding: 8px;">职业</th>
</tr>
<tr>
<td style="border: 1px solid #ccc; padding: 8px;">张三</td>
<td style="border: 1px solid #ccc; padding: 8px;">28</td>
<td style="border: 1px solid #ccc; padding: 8px;">北京</td>
<td style="border: 1px solid #ccc; padding: 8px;">设计师</td>
</tr>
</table>
</div>
这里 min-width 确保表格在窄屏下不会压缩，而是触发横向滚动。
移动端体验优化建议
虽然横向滚动能解决问题，但用户体验仍有提升空间：
- 给外层容器加阴影或边框，提示用户可滑动
- 在极小屏幕上，考虑用媒体查询切换为卡片式布局
- 避免过多列数，优先展示关键信息
基本上就这些。这种方法不需要复杂CSS，适合初学者快速实现响应式表格效果。
