响应式表格可通过容器滚动和媒体查询实现。小屏幕时用overflow-x:auto允许横向滚动，或通过display:block将行转为卡片布局，配合data-label展示标签值，提升可读性。
在CSS初级项目中实现响应式表格，关键在于让表格在小屏幕设备上依然可读且不出现横向滚动。以下是一种简单有效的方法，结合HTML结构与CSS媒体查询，确保表格在不同设备上都能良好展示。
使用流动布局和水平滚动（基础方案）
最直接的方式是让表格容器在小屏幕上出现横向滚动，保证内容完整显示。
给表格外层添加一个容器，并设置 overflow-x: auto：
姓名 年龄 城市 职业 张三 28 北京 设计师 李四 32 上海 工程师
CSS样式如下：
立即学习“前端免费学习笔记（深入）”；
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 400px; / 防止缩得太小 /
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f5f5f5;
}
数据堆叠：移动端转为卡片式布局
更友好的方式是在小屏幕上将每行数据垂直堆叠，类似卡片，提升可读性。
通过CSS将 table, thead, tbody, tr, th, td 改为块级元素，并重新排列内容。
@media (max-width: 600px) {
.table-container table,
.table-container thead,
.table-container tbody,
.table-container th,
.table-container td,
.table-container tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; margin-bottom: 10px; }
td {
border: none;
position: relative;
padding-left: 50%;
text-align: left;
}
td:before {
content: attr(data-label);
position: absolute;
left: 10px;
width: 45%;
font-weight: bold;
}
}
此时需修改HTML，为每个 td 添加 data-label 属性：
张三 28 北京 设计师
这样在手机上，每条数据会以“标签: 值”的形式垂直展示，清晰易读。
优化建议
实际项目中可进一步提升体验：
- 为表格标题设置固定宽度或使用 white-space: nowrap 避免文字折行过多
- 在移动端隐藏非关键列（如使用 class="hide-mobile" + display: none）
- 添加斑马线效果：tr:nth-child(even) 设置背景色
- 确保触摸操作友好，点击区域足够大
基本上就这些。用好容器滚动和媒体查询下的结构重构，就能在初级项目中实现实用的响应式表格。
