响应式表格在手机端显示不全时，应使用overflow-x:auto让容器支持横向滚动，并通过媒体查询调整字体、内边距或切换为卡片布局。1.用.table-container包裹表格并设overflow-x:auto；2.在max-width:480px时缩小字体和padding；3.可选JS或CSS将复杂表转为卡片式展示，提升小屏可读性。
响应式表格在手机端显示不全，通常是因为表格宽度超出屏幕可视区域，而默认情况下内容会被截断或溢出。解决这个问题的关键是让表格容器支持横向滚动，并根据屏幕尺寸调整展示方式。通过 overflow-x: auto 和媒体查询可以有效优化移动端的显示效果。
1. 使用 overflow-x: auto 让表格可横向滚动
将表格包裹在一个容器中，并设置容器的 overflow-x: auto，这样当表格过宽时，用户可以通过左右滑动查看完整内容。
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* 提升iOS滚动流畅度 */
}
.table-container table {
width: 100%;
min-width: 600px; /* 确保小屏下表格不会压缩过度 */
border-collapse: collapse;
}
HTML结构示例：
姓名 年龄 城市 职业 薪资 张三 28 北京 工程师 15000
2. 使用媒体查询优化小屏幕显示
在极小屏幕上，即使横向滚动，表格也可能难以阅读。可以通过媒体查询调整字体大小、内边距，甚至切换为块级布局模拟表格。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) {
.table-container {
padding: 10px 0;
}
.table-container table {
font-size: 14px;
}
.table-container th,
.table-container td {
padding: 8px 12px;
}
}
3. 高级方案：数据列表模式（可选）
对于特别复杂的表格，在超小屏幕上可考虑用 JavaScript 或 CSS 切换为“卡片式”布局，每行数据以独立区块展示，提升可读性。
例如通过媒体查询隐藏表头，在每条记录前用伪元素标注字段名，适合数据行较少的情况。
基本上就这些方法，核心是容器加 overflow-x: auto 解决溢出问题，再配合媒体查询微调样式，确保手机端体验更友好。不复杂但容易忽略细节。
