在网页开发中，表格是展示结构化数据的常用组件，但传统表格在移动端小屏幕上容易出现横向溢出、内容挤压的问题，使用css Grid可以灵活实现响应式表格布局，适配不同尺寸的设备屏幕。
css Grid核心相关属性
要实现响应式表格布局，首先需要了解Grid的几个核心属性：
- grid-template-columns：定义网格的列轨道大小，支持固定值、百分比、fr单位等
- grid-template-rows：定义网格的行轨道大小
- grid-auto-flow：控制网格项的自动排列方向，可选row、column等
- @media：媒体查询，用于在不同屏幕尺寸下应用不同的Grid配置
桌面端表格布局实现
桌面端屏幕宽度足够，我们可以保持传统表格的行列结构，用Grid定义固定的列宽即可。以下是桌面端表格的基础实现代码：
/* 桌面端表格容器样式 */
.table-container {
display: grid;
/* 定义4列，分别对应姓名、年龄、职业、城市 */
grid-template-columns: 1fr 80px 1fr 1fr;
gap: 1px;
background-color: #e0e0e0;
max-width: 1200px;
margin: 0 auto;
}
/* 表格表头样式 */
.table-header {
background-color: #f5f5f5;
padding: 12px 16px;
font-weight: bold;
text-align: center;
}
/* 表格内容项样式 */
.table-cell {
background-color: #ffffff;
padding: 12px 16px;
text-align: center;
}
对应的HTML结构如下：
<div class="table-container"> <div class="table-header">姓名</div> <div class="table-header">年龄</div> <div class="table-header">职业</div> <div class="table-header">城市</div> <div class="table-cell">张三</div> <div class="table-cell">25</div> <div class="table-cell">前端开发</div> <div class="table-cell">北京</div> <div class="table-cell">李四</div> <div class="table-cell">28</div> <div class="table-cell">后端开发</div> <div class="table-cell">上海</div> </div>
响应式适配实现
当屏幕宽度小于768px时，传统行列结构会导致表格内容挤压，此时我们可以通过媒体查询调整Grid配置，将表格转换为卡片式布局，每一行数据作为一个独立的卡片展示。
首先修改Grid的自动排列方向，让每个卡片占满整行，再通过伪元素给每个卡片添加对应的表头标识，具体实现代码如下：
/* 移动端适配，屏幕宽度小于768px时生效 */
@media (max-width: 768px) {
.table-container {
/* 改为单列布局，每个卡片占满整行 */
grid-template-columns: 1fr;
gap: 12px;
background-color: transparent;
padding: 0 16px;
}
.table-header {
/* 移动端隐藏原来的表头 */
display: none;
}
.table-cell {
/* 每个单元格作为卡片的一部分，添加内边距和边框 */
padding: 8px 16px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
/* 每4个单元格组成一个卡片，给卡片添加容器样式 */
.table-cell:nth-child(4n+1) {
border-top: 1px solid #e0e0e0;
border-radius: 4px 4px 0 0;
background-color: #f5f5f5;
font-weight: bold;
}
.table-cell:nth-child(4n+4) {
border-radius: 0 0 4px 4px;
margin-bottom: 12px;
}
/* 给每个单元格添加对应的表头标识 */
.table-cell:nth-child(4n+2)::before {
content: "年龄：";
font-weight: bold;
margin-right: 8px;
}
.table-cell:nth-child(4n+3)::before {
content: "职业：";
font-weight: bold;
margin-right: 8px;
}
.table-cell:nth-child(4n+4)::before {
content: "城市：";
font-weight: bold;
margin-right: 8px;
}
}
完整示例代码
以下是整合桌面端和移动端适配的完整代码，可以直接复制运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css Grid响应式表格布局</title>
<style>
.table-container {
display: grid;
grid-template-columns: 1fr 80px 1fr 1fr;
gap: 1px;
background-color: #e0e0e0;
max-width: 1200px;
margin: 0 auto;
}
.table-header {
background-color: #f5f5f5;
padding: 12px 16px;
font-weight: bold;
text-align: center;
}
.table-cell {
background-color: #ffffff;
padding: 12px 16px;
text-align: center;
}
@media (max-width: 768px) {
.table-container {
grid-template-columns: 1fr;
gap: 12px;
background-color: transparent;
padding: 0 16px;
}
.table-header {
display: none;
}
.table-cell {
padding: 8px 16px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
.table-cell:nth-child(4n+1) {
border-top: 1px solid #e0e0e0;
border-radius: 4px 4px 0 0;
background-color: #f5f5f5;
font-weight: bold;
}
.table-cell:nth-child(4n+4) {
border-radius: 0 0 4px 4px;
margin-bottom: 12px;
}
.table-cell:nth-child(4n+2)::before {
content: "年龄：";
font-weight: bold;
margin-right: 8px;
}
.table-cell:nth-child(4n+3)::before {
content: "职业：";
font-weight: bold;
margin-right: 8px;
}
.table-cell:nth-child(4n+4)::before {
content: "城市：";
font-weight: bold;
margin-right: 8px;
}
}
</style>
</head>
<body>
<div class="table-container">
<div class="table-header">姓名</div>
<div class="table-header">年龄</div>
<div class="table-header">职业</div>
<div class="table-header">城市</div>
<div class="table-cell">张三</div>
<div class="table-cell">25</div>
<div class="table-cell">前端开发</div>
<div class="table-cell">北京</div>
<div class="table-cell">李四</div>
<div class="table-cell">28</div>
<div class="table-cell">后端开发</div>
<div class="table-cell">上海</div>
<div class="table-cell">王五</div>
<div class="table-cell">30</div>
<div class="table-cell">产品经理</div>
<div class="table-cell">广州</div>
</div>
</body>
</html>
注意事项
在实际使用中，还需要注意以下几点：
- 如果表格列数不固定，可以使用
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))实现自动列数适配 - 卡片式布局的表头标识需要根据实际列数调整
nth-child的选择器规则 - Grid的gap属性在不同浏览器中的兼容性较好，不需要添加前缀即可使用