使用css Grid可实现响应式表格布局，通过grid-template-columns、媒体查询和minmax()函数，在不同屏幕下自动调整结构，结合display: contents和伪元素标签提升移动端可读性。
用 CSS Grid 实现响应式表格布局，核心是利用网格容器的灵活列定义和媒体查询，让表格在不同屏幕尺寸下自动调整结构，而不是依赖传统的 table 元素。这种方法更灵活，尤其适合移动端优先的设计。
使用 Grid 创建基础表格结构
将一个 div 容器设为网格布局，模拟表格的行列结构。每一行用一个子元素表示，每个子元素内部再用 Grid 分割成若干单元格。
.grid-table { display: grid; grid-template-columns: repeat(4, 1fr); /* 4列均分 */ gap: 1px; background: #ddd; } <p>.grid-row { display: contents; /<em> 让子元素直接参与网格布局 </em>/ }</p><p>.grid-cell { padding: 12px; background: white; border: 1px solid #eee; }</p>
html 结构如下：
<div class="grid-table"> <div class="grid-row"> <div class="grid-cell">姓名</div> <div class="grid-cell">年龄</div> <div class="grid-cell">城市</div> <div class="grid-cell">职业</div> </div> <div class="grid-row"> <div class="grid-cell">张三</div> <div class="grid-cell">28</div> <div class="grid-cell">北京</div> <div class="grid-cell">工程师</div> </div> </div>
通过媒体查询实现响应式切换
在小屏幕上，可以把每行数据转换为垂直堆叠的卡片形式，提升可读性。这可以通过改变网格列数或整体结构实现。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 600px) { .grid-table { grid-template-columns: 1fr; /* 每行占满宽度 */ } <p>.grid-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 10px; border: 1px solid #ddd; margin-bottom: 10px; }</p><p>/<em> 可选：为每列添加标签提示 </em>/ .grid-cell:nth-child(1)::before { content: "姓名:"; font-weight: bold; } .grid-cell:nth-child(2)::before { content: "年龄:"; font-weight: bold; } .grid-cell:nth-child(3)::before { content: "城市:"; font-weight: bold; } .grid-cell:nth-child(4)::before { content: "职业:"; font-weight: bold; } }</p>
这样在手机上，每条记录变成一个独立卡片，字段前加标签，用户更容易理解。
使用 minmax() 和 auto-fit 实现自适应列
如果列数不确定或希望列宽自动调整，可以用 minmax() 配合 repeat(auto-fit, ...)。
.grid-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: #ddd; }
浏览器会尽可能多地放入最小宽度为 150px 的列，超出则换行。适合动态内容或未知列数的场景。
基本上就这些。Grid 提供了比传统表格更强的布局控制力，配合媒体查询能轻松实现真正响应式的表格体验。不复杂但容易忽略细节，比如 display: contents 的使用和移动端标签补充。