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