使用 css grid 可精准控制 8 个表格在单页中的位置与尺寸，通过 `grid-area` 指定每个表格所在区域，配合响应式行列定义（如 `30% 30% 25% 15%` 行高 + `1fr 1fr 1fr` 列宽），实现灵活、语义清晰且无需浮动或绝对定位的现代化布局。

在现代网页开发中，将多个表格（尤其是功能或数据维度各异的 8 个独立表格）整齐、可控地排布在单页上，已不再依赖过时的

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

嵌套布局或易失控的 float 技术。CSS Grid 是当前最推荐、最直观且最具表现力的解决方案——它允许你以“网格容器 + 网格项”的方式，像设计画布一样规划每一部分的空间归属。

✅ 推荐实现：基于 Grid 的语义化容器布局

核心思路是：

• 创建一个全屏（或自定义尺寸）的 #container 作为 Grid 容器；
• 将每个表格包裹在独立
  中（提升可维护性与样式隔离性）；
• 使用 grid-area: row-start / col-start / row-end / col-end 精确指定每个
  占据的网格区域；
• 所有表格设置为 width: 100%; height: 100%，自动填满父容器空间。

以下是精简可用的完整代码示例（已移除调试用背景色和全屏尺寸，适配常规页面流）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>8 Tables Layout with CSS Grid</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    #container {
      display: grid;
      grid-template-rows: 30% 30% 25% 15%; /* 四行高度比例 */
      grid-template-columns: 1fr 1fr 1fr;   /* 三列等宽 */
      gap: 12px; /* 表格间留白，提升可读性 */
      width: 100%;
      min-height: 90vh; /* 避免内容过短时塌陷 */
      padding: 16px;
    }

    /* 各区域定位（注意：行/列索引从1开始） */
    #div1 { grid-area: 1 / 1 / 3 / 2; } /* 跨第1–2行，第1列 */
    #div2 { grid-area: 3 / 1 / 4 / 2; }
    #div3 { grid-area: 4 / 1 / 5 / 2; }
    #div4 { grid-area: 1 / 2 / 5 / 3; } /* 跨全部4行，第2列 */
    #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;
      font-size: 14px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    #container th,
    #container td {
      padding: 8px 12px;
      text-align: left;
      border: 1px solid #e0e0e0;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="div1"><table><tr><th>表1标题</th><td>数据A</td></tr></table></div>
    <div id="div2"><table><tr><th>表2标题</th><td>数据B</td></tr></table></div>
    <div id="div3"><table><tr><th>表3标题</th><td>数据C</td></tr></table></div>
    <div id="div4"><table><tr><th>表4标题</th><td>长内容…</td></tr></table></div>
    <div id="div5"><table><tr><th>表5标题</th><td>数据E</td></tr></table></div>
    <div id="div6"><table><tr><th>表6标题</th><td>数据F</td></tr></table></div>
    <div id="div7"><table><tr><th>表7标题</th><td>数据G</td></tr></table></div>
    <div id="div8"><table><tr><th>表8标题</th><td>数据H</td></tr></table></div>
  </div>
</body>
</html>

⚠️ 注意事项与优化建议

• 响应式增强：若需适配小屏幕，可在媒体查询中切换为单列布局（如 grid-template-columns: 1fr; grid-template-rows: auto;），并启用垂直滚动；
• 可访问性：确保每个

包含语义化结构（/）、

或 aria-label，便于屏幕阅读器识别；

性能提示：避免对大量表格使用 height: 100% 导致重排压力；如内容高度不固定，可改用 min-height 或 flex 内部对齐；

替代方案对比：Flexbox 更适合一维布局（如单行/列排列），而本例需二维精确定位，Grid 不仅更简洁，也天然支持跨行跨列，是唯一合理选择。

通过以上方式，你不仅能完美复现参考图中的布局结构，还能获得良好的可维护性、可扩展性与现代浏览器兼容性（Chrome/Firefox/Safari/Edge 均原生支持）。告别“表格嵌套表格”的反模式，拥抱 Grid —— 让布局回归逻辑，而非hack。

立即学习“前端免费学习笔记（深入）”；