使用CSS Grid和媒体查询可实现响应式表格布局，桌面端保持多列样式，移动端通过grid-template-columns: 1fr将行转为垂直堆叠，结合data-label显示表头提升可读性与可访问性。
在现代网页设计中，表格内容常常需要在不同设备上清晰可读。使用CSS Grid和媒体查询可以高效实现响应式表格布局，让表格在桌面端保持传统样式，在移动端则自动调整为更易浏览的形式。
使用CSS Grid创建基础表格结构
Grid布局提供了强大的二维控制能力，适合重构表格的显示方式。通过将容器设为display: grid，可以自定义行与列的行为。
例如，将原本的<table>结构替换为语义化的<code><div>或保留原标签并应用Grid：
<font style="color:#d63384">.responsive-table {<br>
display: grid;<br>
grid-template-columns: repeat(4, 1fr);<br>
gap: 1px;<br>
background: #ddd;<br>
width: 100%;<br>
}</font>
<font style="color:#20c997">.table-row {<br>
display: contents;<br>
}</font>
<font style="color:#20c997">.table-cell {<br>
padding: 12px;<br>
background: white;<br>
border-bottom: 1px solid #eee;<br>
}</font>
<p>这样做的优势是摆脱了传统表格对<code><tr>和<code><td>的严格嵌套限制，同时能自由控制每一项的位置。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<h3>利用媒体查询适配小屏幕</h3>
<p>当屏幕变窄时，传统的多列表格会难以阅读。通过媒体查询切换布局模式，可以让每条数据垂直堆叠展示。</p>
<font style="color:#d63384">@media (max-width: 768px) {<br>
.responsive-table {<br>
grid-template-columns: 1fr;<br>
}<br><br>
.table-row {<br>
display: grid;<br>
margin-bottom: 1rem;<br>
border: 1px solid #ccc;<br>
border-radius: 8px;<br>
overflow: hidden;<br>
}<br><br>
.table-cell {<br>
text-align: center;<br>
border-bottom: 1px dashed #eee;<br>
}<br><br>
.table-cell:last-child {<br>
border-bottom: none;<br>
}<br>
}</font>
<p>此时每个表格行变成一个独立的网格容器，所有单元格纵向排列，提升移动端可读性。</p>
<h3>增强可访问性与标签映射</h3>
<p>在移动视图中，原始表头信息可能丢失。建议为每个单元格添加对应的标题提示，比如用<code>data-label属性保存列名，并通过伪元素显示。
content: attr(data-label) ": ";
font-weight: bold;
display: inline-block;
margin-bottom: 4px;
}
这样即使没有可见的表头，用户也能清楚知道每个值对应的信息类型。
基本上就这些。结合Grid的灵活布局能力和媒体查询的断点控制，再辅以语义化标记和视觉优化，就能构建出真正响应式的表格体验。关键是根据实际内容调整断点和堆叠逻辑，确保信息始终清晰易读。
