响应式表格可通过三种方法优化移动端阅读：一是添加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;
}数据堆叠：将行转为卡片式展示
当屏幕很小时，把每一行数据变成一个垂直堆叠的“卡片”，每行的表头作为标签显示在数据前。
立即学习“前端免费学习笔记（深入）”；
实现方式：
- 使用 display: block 在小屏上改变表格结构
- 利用 data-label 属性保存表头信息
- 用伪元素 ::before 显示对应字段名
<table>
<thead>
<tr><th>姓名</th><th>邮箱</th><th>电话</th></tr>
</thead>
<tbody>
<tr>
<td data-label="姓名">张三</td>
<td data-label="邮箱">zhang@example.com</td>
<td data-label="电话">138-0000-0000</td>
</tr>
</tbody>
</table>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;
}
}基本上就这些方法。选择哪种取决于你的数据量和用户使用场景。横向滚动适合列数不多的情况，堆叠模式更利于移动端阅读，隐藏列则最简洁。
