HTML 页面中优雅布局 8 个独立表格：CSS Grid 实战教程-html教程-PHP中文网

HTML 页面中优雅布局 8 个独立表格：CSS Grid 实战教程

本文详解如何使用 css grid 精确控制 8 个独立 html 表格在单页中的响应式布局，避免传统浮动或绝对定位的复杂性，提供可复用、语义清晰、易于维护的网格方案。

在现代 Web 开发中，将多个表格（尤其是内容异构、尺寸不一的业务数据表）整齐有序地组织在单页上，是仪表盘、数据看板或管理后台的常见需求。直接嵌套

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

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

下载

标签并依赖 float 或 inline-block 往往导致错位、换行不可控、响应性差等问题。CSS Grid 是解决此类多区域、非均匀布局的理想方案——它允许你以声明式方式定义二维网格容器，并为每个子元素精确指定其占据的行列范围。

以下是一个经过生产验证的完整实现方案：

✅ 布局结构设计思路

使用一个 #container 作为 Grid 容器，划分为 4 行 × 3 列 的基础网格；
通过 grid-area: row-start / col-start / row-end / col-end 语法，让 8 个
（每个包裹一张表格）各占特定单元格区域；
行高按业务重要性比例分配（如顶部两行各占 30%，中间行 25%，底部紧凑行 15%），列宽均分（1fr 1fr 1fr）；

所有表格设置 width: 100%; height: 100%，使其完全填充父

，确保视觉一致性。

? 完整可运行代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>8 Tables Dashboard Layout</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    #container {
      display: grid;
      grid-template-rows: 30% 30% 25% 15%;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px; /* 推荐添加合理间距，提升可读性 */
      width: 100vw;
      height: 100vh;
      padding: 12px;
      box-sizing: border-box;
    }

    /* 每个区域对应一张表格容器 */
    #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; } /* 占满第2列全部4行 → 长竖表 */
    #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;
    }
    #container th, #container td {
      padding: 8px 12px;
      text-align: left;
      border: 1px solid #e0e0e0;
    }
    #container th {
      background-color: #f5f5f5;
      font-weight: 600;
    }

    /* 可选：为调试添加临时背景色（上线前请移除） */
    /* #div1 { background: rgba(242, 161, 133, 0.1); } */
  </style>
</head>
<body>
  <div id="container">
    <div id="div1">
      <table>
        <thead><tr><th>指标A</th><th>值</th><th>趋势</th></tr></thead>
        <tbody><tr><td>订单量</td><td>1,248</td><td>↑ 12%</td></tr></tbody>
      </table>
    </div>
    <div id="div2">
      <table><thead><tr><th>城市</th><th>销量</th></tr></thead><tbody><tr><td>北京</td><td>321</td></tr></tbody></table>
    </div>
    <div id="div3">
      <table><thead><tr><th>状态</th><th>数量</th></tr></thead><tbody><tr><td>待审核</td><td>17</td></tr></tbody></table>
    </div>
    <div id="div4">
      <table>
        <thead><tr><th>产品名</th><th>库存</th><th>预警</th></tr></thead>
        <tbody>
          <tr><td>耳机X1</td><td>42</td><td>⚠️</td></tr>
          <tr><td>键盘Pro</td><td>8</td><td>❗</td></tr>
          <tr><td>鼠标Lite</td><td>156</td><td>—</td></tr>
        </tbody>
      </table>
    </div>
    <div id="div5">
      <table><thead><tr><th>渠道</th><th>转化率</th></tr></thead><tbody><tr><td>微信</td><td>4.2%</td></tr></tbody></table>
    </div>
    <div id="div6">
      <table><thead><tr><th>部门</th><th>任务数</th></tr></thead><tbody><tr><td>技术部</td><td>24</td></tr></tbody></table>
    </div>
    <div id="div7">
      <table><thead><tr><th>错误类型</th><th>频次</th></tr></thead><tbody><tr><td>404</td><td>9</td></tr></tbody></table>
    </div>
    <div id="div8">
      <table><thead><tr><th>用户等级</th><th>占比</th></tr></thead><tbody><tr><td>VIP</td><td>18.3%</td></tr></tbody></table>
    </div>
  </div>
</body>
</html>