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

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

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

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

Dora

创建令人惊叹的3D动画网站，无需编写一行代码。

下载

✅ 核心思路

• 创建一个全屏容器（#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 结构（语义清晰，易于维护）

<div id="container">
  <div id="div1"><table><!-- 表1内容 --></table></div>
  <div id="div2"><table><!-- 表2内容 --></table></div>
  <div id="div3"><table><!-- 表3内容 --></table></div>
  <div id="div4"><table><!-- 表4内容 --></table></div>
  <div id="div5"><table><!-- 表5内容 --></table></div>
  <div id="div6"><table><!-- 表6内容 --></table></div>
  <div id="div7"><table><!-- 表7内容 --></table></div>
  <div id="div8"><table><!-- 表8内容 --></table></div>
</div>

⚠️ 注意事项与进阶建议

• 不要嵌套表格布局：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 销售统计