如何使用CSS Grid实现复杂表格布局_网格布局实践案例

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何使用CSS Grid实现复杂表格布局_网格布局实践案例

2025-11-01

浏览次数：次

返回列表

使用CSS Grid可构建灵活的表格布局。通过定义grid容器、设置列宽、美化表头与单元格、利用grid-column实现跨列及媒体查询优化响应式显示，提升数据展示的美观性与功能性。

如何使用css grid实现复杂表格布局_网格布局实践案例

在现代网页开发中，表格布局早已不局限于 table 标签。使用 CSS Grid 可以更灵活、语义化地构建复杂的数据展示结构，尤其适用于仪表盘、报表或响应式数据网格。下面通过一个实践案例，展示如何用 CSS Grid 实现一个兼具美观与功能的复杂表格布局。

1. 基本结构设计：定义网格容器

要使用 CSS Grid 构建表格，先从 HTML 结构入手。我们采用 div 元素模拟表格行和列，保持语义清晰的同时提升样式控制能力。

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

1091 查看详情 Mureka

<div class="grid-table">
  <div class="header-cell">姓名</div>
  <div class="header-cell">部门</div>
  <div class="header-cell">销售额</div>
  <div class="header-cell">状态</div>
<p><div class="data-cell">张三</div>
<div class="data-cell">销售部</div>
<div class="data-cell">¥120,000</div>
<div class="data-cell"><span class="status active">活跃</span></div></p><p><div class="data-cell">李四</div>
<div class="data-cell">技术部</div>
<div class="data-cell">¥85,000</div>
<div class="data-cell"><span class="status inactive">待定</span></div></p><p><div class="summary-row" colspan="4">
总计：¥205,000
</div>
</div></p>

接下来，在 CSS 中将容器设为 grid 布局，并定义列宽：

.grid-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 四列均分 */
  gap: 1px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
}

2. 美化表头与单元格样式

通过为表头和数据单元格设置统一对齐方式和背景色，增强可读性。

.header-cell {
  background-color: #003366;
  color: white;
  padding: 12px 8px;
  font-weight: bold;
  text-align: center;
}
<p>.data-cell {
background-color: white;
padding: 10px 8px;
text-align: center;
border-bottom: 1px solid #eee;
}</p>

如果需要某列固定宽度（如“状态”列较窄），可以调整 grid-template-columns：

grid-template-columns: 2fr 1.5fr 1fr 1fr;

这样“姓名”列更宽，适合长文本，“状态”列则紧凑显示标签。

3. 处理跨列元素：合并单元格效果

CSS Grid 支持 grid-column 属性实现类似“colspan”的效果。例如，底部的汇总行横跨全部四列：

.summary-row {
  grid-column: span 4;
  background-color: #003366;
  color: white;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
}

你也可以让某些数据项跨两列，比如备注信息：

<div class="note-cell" style="grid-column: span 2;">
  此员工表现优异
</div>

4. 响应式适配：移动端优化

在小屏幕上，四列可能过于拥挤。我们可以使用媒体查询切换为堆叠布局或滚动容器。

@media (max-width: 768px) {
  .grid-table {
    grid-template-columns: 1fr;
  }
<p>.header-cell {
display: none; /<em> 隐藏表头，改用标签内联显示 </em>/
}</p><p>.data-cell:nth-child(4n+1) { /<em> 每行第一个单元格（姓名）加粗 </em>/
font-weight: bold;
background-color: #f9f9f9;
}
}</p>

另一种方案是启用横向滚动：

@media (max-width: 768px) {
  .grid-table {
    overflow-x: auto;
    white-space: nowrap;
  }
}

提示： 结合 minmax() 函数可以让列具有弹性：

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

这能自动调整列数以适应容器宽度，非常适合动态内容。

基本上就这些。使用 CSS Grid 构建表格摆脱了传统 table 的限制，支持自由布局、跨列控制和响应式设计，特别适合现代 Web 应用中的复杂数据展示场景。关键是合理划分网格结构，并善用 grid-column 和媒体查询进行精细化控制。

以上就是如何使用CSS Grid实现复杂表格布局_网格布局实践案例的详细内容，更多请关注其它相关文章！

# 适用于 # 游戏网站网络推广方案 # 简述seo工作步骤 # 温州网站建设小程序搭建 # 抖音seo排名广场 # 唐山建设网站网站官网 # 办公用品网站建设 # 品牌网站优化排名系统 # 大连网站建设公司怎么样 # 樱桃商务网站建设方案 # 四川网站关键词排名优化 # 中文网 # 相关文章 # css # 设为 # 第一个 # 选择器 # 两种类型 # 中不 # 如何使用 # 单元格 # lsp # overflow # 响应式设计 # html

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：J*aScript Web组件与自定义元素

下一篇：jQuery中如何使用add()方法添加元素

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

如何使用CSS Grid实现复杂表格布局_网格布局实践案例

1. 基本结构设计：定义网格容器

2. 美化表头与单元格样式

3. 处理跨列元素：合并单元格效果

4. 响应式适配：移动端优化