使用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;
}
.grid-row {
display: contents; / 让子元素直接参与网格布局 /
}
.grid-cell {
padding: 12px;
background: white;
border: 1px solid #eee;
}
HTML 结构如下：
姓名年龄城市职业张三28北京工程师
通过媒体查询实现响应式切换
在小屏幕上，可以把每行数据转换为垂直堆叠的卡片形式，提升可读性。这可以通过改变网格列数或整体结构实现。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 600px) {
.grid-table {
grid-template-columns: 1fr; /* 每行占满宽度 */
}
.grid-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
padding: 10px;
border: 1px solid #ddd;
margin-bottom: 10px;
}
/ 可选：为每列添加标签提示 /
.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; }
}
这样在手机上，每条记录变成一个独立卡片，字段前加标签，用户更容易理解。
使用 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 的使用和移动端标签补充。
