HTML 中使用 CSS Grid 布局优雅排列 8 个独立表格

碧海醫心

发布时间：2026-01-12 17:31:17

798人浏览过

来源于php中文网

原创

HTML 中使用 CSS Grid 布局优雅排列 8 个独立表格

本文介绍如何利用 css grid 精确控制页面上 8 个独立表格的布局，实现类似四行三列（含跨区域）的响应式网格排布，兼顾结构清晰性与视觉一致性。

在现代网页开发中，将多个表格（尤其是语义与数据彼此独立的表格）整齐、可控地组织在同一页面上，不应依赖过时的

嵌套或浮动布局，而应采用语义清晰、控制力强的 CSS Grid。针对 8 个表格需按特定区域分布（如图示：左上双行高、右侧纵向堆叠、中部宽幅占位等），Grid 的 grid-area 定位是最直接高效的方案。

✅ 推荐实现步骤

包裹容器启用 Grid：为外层容器（如 #container）设置 display: grid，并定义整体网格轨道；

合理划分行列比例：根据视觉权重分配 grid-template-rows 与 grid-template-columns。例如：

grid-template-rows: 30% 30% 25% 15%; /* 四行，高度递减 */
grid-template-columns: 1fr 1fr 1fr;   /* 三列等宽 */

为每个表格容器指定精确区域：使用 grid-area: row-start / col-start / row-end / col-end（注意：行/列号从 1 开始计数）。例如：

VIVA
一个免费的AI创意视觉设计平台

下载

立即学习“前端免费学习笔记（深入）”；
- 左上大表（占第1–2行、第1列）→ grid-area: 1 / 1 / 3 / 2;
- 右侧纵向四表（各占1行、第3列）→ 分别设为 1/3/2/4、2/3/3/4、3/3/4/4、4/3/5/4

确保表格自适应填充：对所有 table 元素设置：

#container table {
  width: 100%;
  height: 100%;
  border-collapse: collapse; /* 可选：优化边框显示 */
}

? 完整精简示例（含 HTML + CSS）

<!DOCTYPE html>
<html>
<head>
<style>
html, body { margin: 0; padding: 0; }
#container {
  display: grid;
  grid-template-rows: 30% 30% 25% 15%;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; /* 推荐添加适度间距，提升可读性 */
  width: 100vw;
  height: 100vh;
  padding: 12px;
}

/* 每个 div 对应一个表格容器，按需调整 grid-area */
#div1 { grid-area: 1 / 1 / 3 / 2; }
#div2 { grid-area: 3 / 1 / 4 / 2; }
#div3 { grid-area: 4 / 1 / 5 / 2; }
#div4 { grid-area: 1 / 2 / 5 / 3; }
#div5 { grid-area: 1 / 3 / 2 / 4; }
#div6 { grid-area: 2 / 3 / 3 / 4; }
#div7 { grid-area: 3 / 3 / 4 / 4; }
#div8 { grid-area: 4 / 3 / 5 / 4; }

#container table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>
<div id="container">
  <div id="div1"><table><tr><td>Table 1</td><td>Data</td></tr></table></div>
  <div id="div2"><table><tr><td>Table 2</td></tr></table></div>
  <div id="div3"><table><tr><td>Table 3</td></tr></table></div>
  <div id="div4"><table><tr><td>Table 4</td><td>Wide</td></tr></table></div>
  <div id="div5"><table><tr><td>Table 5</td></tr></table></div>
  <div id="div6"><table><tr><td>Table 6</td></tr></table></div>
  <div id="div7"><table><tr><td>Table 7</td></tr></table></div>
  <div id="div8"><table><tr><td>Table 8</td></tr></table></div>
</div>
</body>
</html>

⚠️ 注意事项与优化建议

移除调试样式：示例中 background-color 和 100vh/100vw 仅用于可视化定位，上线前请删除或替换为实际尺寸约束（如 min-height: 800px）；
响应式增强：可在 @media 查询中为小屏幕切换为单列堆叠（grid-template-columns: 1fr），保障移动端可用性；
可访问性提醒：每个

应包含

如何使用纯 CSS 实现导航栏中精准控制子菜单的显示与隐藏

如何使用纯 CSS 实现头部导航中精准控制子菜单的显示与隐藏

如何让元素隐藏在边框后方（CSS z-index 与伪元素遮罩技巧）

如何精准裁剪并覆盖图像的 div 元素

如何让图片的20%移出视口实现“半隐式”边缘展示效果

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关专题

堆和栈的区别

堆和栈的区别：1、内存分配方式不同；2、大小不同；3、数据访问方式不同；4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容，供大家免费下载体验。

443

2023.07.18

堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

605

2023.08.10

flex教程

php中文网为大家带来了flex教程合集，Flex是采用Flex布局的元素，称为Flex容器（flex container），简称"容器"，它的所有子元素自动成为容器成员，有三个核心概念： flex项，需要布局的元素；flex容器，其包含flex项；排列方向，这决定了flex项的布局方向。php中文网还为大家带来flex的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

370

2023.06.14

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

2026.03.11

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

2026.03.06

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

223

2026.03.05

PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

458

2026.03.04

热门下载

网站特效

网站源码

网站素材

前端模板