先用 overflow-x: auto 确保表格可横向滚动，再通过 media queries 优化小屏显示。具体做法是：将表格包裹在设置 overflow-x: auto 的容器中，防止溢出；窄屏下使用 flex 布局堆叠行内容，配合 :before 提升可读性，并通过 hide-on-small 类隐藏次要列，提升移动端体验。
在网页开发中，表格在小屏幕上容易溢出容器，影响用户体验。通过结合 overflow auto 和 media queries，可以轻松实现响应式表格布局。核心思路是：在窄屏下让表格可横向滚动，必要时调整单元格显示方式。
使用 overflow-x: auto 包裹表格
将表格放在一个容器内，设置容器的 overflow-x: auto，这样当表格宽度超过容器时，用户可以横向滚动查看完整内容。
.container {overflow-x: auto;
max-width: 100%;
}
table {
width: 100%;
white-space: nowrap;
}
这样做能防止表格撑破父容器，适用于大多数场景。注意不要给表格设置固定宽度过大，避免失效。
配合 Media Queries 调整显示
在更小的屏幕上，可以进一步优化表格结构。比如切换为块级布局、隐藏次要列或堆叠行内容。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.table th,
.table td {
display: block;
}
.table tr {
display: flex;
flex-direction: column;
border-bottom: 1px solid #ddd;
}
.table th:first-child,
.table td:first-child {
font-weight: bold;
background: #f0f0f0;
} }
这种堆叠方式把每行变成垂直排列，适合手机查看。可以用 :before 伪元素添加列名标签，提升可读性。
隐藏非关键列提升体验
有些数据在移动端不是必须展示的。可以通过媒体查询选择性隐藏。
.hide-on-small {display: table-cell;
}
@media (max-width: 600px) {
.hide-on-small {
display: none;
} }
在HTML中给不重要的 th 和 td 加上这个类，就能在小屏自动隐藏，保持界面简洁。
基本上就这些。关键是先用 overflow-x: auto 保证基本可用性，再通过 media queries 逐步增强移动端体验。不复杂但容易忽略细节。
