响应式表格可通过三种方法优化移动端阅读：一是添加overflow-x: auto实现横向滚动；二是使用媒体查询和data-label将行转为卡片式堆叠；三是隐藏次要列简化显示。
响应式表格在移动设备上常因列太多而难以阅读。通过一些巧妙的 CSS 技巧，可以让表格在小屏幕上依然清晰可用。核心思路是：在大屏保持传统表格布局，在小屏切换为类似卡片的堆叠样式。
使用媒体查询和横向滚动
最简单的方法是让表格容器在小屏幕上出现横向滚动条，用户可以左右滑动查看完整内容。
关键点：
- 给表格外层加一个带 overflow-x: auto 的容器
- 确保表格本身不会被压缩变形
.table-container {
overflow-x: auto;
}
.table-container table {
width: 100%;
border-collapse: collapse;
min-width: 600px; /* 防止过小压缩 */
}
.table-container th,
.table-container td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}数据堆叠：将行转为卡片式展示
当屏幕很小时，把每一行数据变成一个垂直堆叠的“卡片”，每行的表头作为标签显示在数据前。
立即学习“前端免费学习笔记（深入）”；
实现方式：
《PHP设计模式指南》中文版
下载
《PHP设计模式》首先介绍了设计模式，讲述了设计模式的使用及重要性，并且详细说明了应用设计模式的场合。接下来，本书通过代码示例介绍了许多设计模式。最后，本书通过全面深入的案例分析说明了如何使用设计模式来计划新的应用程序，如何采用PHP语言编写这些模式，以及如何使用书中介绍的设计模式修正和重构已有的代码块。作者采用专业的、便于使用的格式来介绍相关的概念，自学成才的编程人员与经过更多正规培训的编程人员
- 使用 display: block 在小屏上改变表格结构
- 利用 data-label 属性保存表头信息
- 用伪元素 ::before 显示对应字段名
| 姓名 | 邮箱 | 电话 |
|---|---|---|
| 张三 | zhang@example.com | 138-0000-0000 |
CSS 关键代码：
@media (max-width: 600px) {
table, thead, tbody, tr, td {
display: block;
}
tr {
margin-bottom: 15px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
position: relative;
padding-left: 50% !important;
border: none;
text-align: right;
}
td::before {
content: attr(data-label);
position: absolute;
left: 0;
width: 45%;
font-weight: bold;
text-align: left;
}
}隐藏次要列（简化显示）
如果某些列不是关键信息，可以在小屏幕上直接隐藏，保留核心数据。
做法：
- 为不重要的列添加类名如 .hide-on-mobile
- 在小屏下用 display: none 隐藏
@media (max-width: 480px) {
.hide-on-mobile {
display: none;
}
}基本上就这些方法。选择哪种取决于你的数据量和用户使用场景。横向滚动适合列数不多的情况，堆叠模式更利于移动端阅读，隐藏列则最简洁。
