如何使用 CSS Grid 精准布局页面中的 8 个独立 HTML 表格

本文介绍如何利用 css grid 实现 8 个表格在单页上的灵活、响应式网格化布局，通过 `grid-area` 精确控制每个表格的位置与尺寸，避免传统浮动或内联块带来的错位问题。

在现代网页开发中，将多个表格（尤其是语义上彼此独立的数据展示模块）整齐、可控地排列在单页上，最佳实践是采用 css Grid 布局——它专为二维布局设计，远比 Float、inline-block 或老旧的 table 嵌套更可靠、可维护性更强。

以下是一个经过优化的完整实现方案，适配您图示中「4 行 × 3 列」区域划分（共 12 个逻辑格子），其中 8 个区域分别承载表格，其余留白或合并使用：

✅ 核心思路

• 创建一个全屏容器（#container），设为 display: grid
• 使用 grid-template-rows 和 grid-template-columns 定义四行三列的基准网格
• 用 grid-area: row-start / col-start / row-end / col-end 为每个
  （包裹表格的容器）分配精确占位

• 所有表格设为 width: 100%; height: 100%，使其完全填充父容器

? 推荐 CSS（生产环境精简版）

html, body {   margin: 0;   padding: 0;   height: 100%; }  #container {   display: grid;   grid-template-rows: 30% 30% 25% 15%; /* 四行高度比例 */   grid-template-columns: 1fr 1fr 1fr;    /* 三等宽列 */   gap: 8px;                              /* 表格间统一间距（推荐 8–16px） */   width: 100vw;   height: 100vh;   padding: 12px;                         /* 可选：整体内边距，提升呼吸感 */ }  /* 每个表格容器按需定位（注意：行/列索引从 1 开始） */ #div1 { grid-area: 1 / 1 / 3 / 2; } /* 占第1–2行、第1列 → 高度约60% */ #div2 { grid-area: 3 / 1 / 4 / 2; } /* 第3行、第1列 */ #div3 { grid-area: 4 / 1 / 5 / 2; } /* 第4行、第1列 */ #div4 { grid-area: 1 / 2 / 5 / 3; } /* 跨第1–4行、第2列 → 高度100% */ #div5 { grid-area: 1 / 3 / 2 / 4; } /* 第1行、第3列 */ #div6 { grid-area: 2 / 3 / 3 / 4; } /* 第2行、第3列 */ #div7 { grid-area: 3 / 3 / 4 / 4; } /* 第3行、第3列 */ #div8 { grid-area: 4 / 3 / 5 / 4; } /* 第4行、第3列 */  /* 统一表格样式：撑满容器、去除默认边距 */ #container table {   width: 100%;   height: 100%;   border-collapse: collapse;   font-size: 14px; } #container td, #container th {   padding: 6px 10px;   text-align: left;   border: 1px solid #ddd; }

? 对应 HTML 结构（语义清晰，易于维护）

⚠️ 注意事项与进阶建议

• 不要嵌套表格布局：HTML
  元素仅用于数据表格语义，切勿用其做页面布局（已过时且不可访问）。
  响应式增强：如需适配小屏幕，可添加媒体查询，例如在 max-width: 768px 下改为单列堆叠：

  @media (max-width: 768px) {   #container {     grid-template-columns: 1fr;     grid-template-rows: auto; /* 自适应高度 */     gap: 12px;   }   #div1, #div4 { grid-area: auto; } /* 重置为自然流式 */ }

  可访问性优化：为每个
  
  添加

  ）。

  性能提示：若表格数据量大，考虑虚拟滚动或分页，避免一次性渲染过多 dom 节点。

  通过该方案，您不仅能精准复现目标布局，还能获得良好的可扩展性与维护性——后续增删表格只需调整对应 grid-area 和 HTML 结构，无需重构整个布局逻辑。

  或 aria-label，说明其数据主题（如

  Q3 销售统计