登录
首页 >  文章 >  前端

CSSGrid布局8个表格实战教程

时间：2026-02-02 12:18:45 386浏览 收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《CSS Grid精准布局8个表格教程》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

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

本文介绍如何利用 CSS Grid 实现 8 个表格在单页上的灵活、响应式网格化布局，避免传统浮动或绝对定位的复杂性，确保结构语义清晰、维护性强。

在现代网页开发中，将多个表格（尤其是内容独立、用途各异的表格）整齐有序地组织在同一页面上，关键不在于“能否放”，而在于“如何高效、可维护地布局”。CSS Grid 是目前最直观、最强大的解决方案——它允许你以二维方式（行与列）精确控制每个表格的占位区域，无需嵌套冗余容器，也无需依赖 JavaScript。

以下是一个经过优化的完整实现方案，适配你提供的四行三列视觉布局（共 8 个区域，右下角留空），并已移除调试用样式，确保生产就绪：

✅ 推荐结构：Grid 容器 + 语义化 div 包裹表格

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>8 表格网格布局</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    #dashboard {
      display: grid;
      grid-template-rows: 30% 30% 25% 15%;   /* 自定义高度比例 */
      grid-template-columns: 1fr 1fr 1fr;       /* 三等宽列 */
      gap: 12px;                               /* 统一间隙，提升可读性 */
      width: 100vw;
      height: 100vh;
      padding: 16px;
      overflow: auto;
    }

    /* 使用 grid-area 指定每个区域的行列范围（行起/行止/列起/列止）*/
    #table-1 { grid-area: 1 / 1 / 3 / 2; }  /* 占第1–2行，第1列 */
    #table-2 { grid-area: 3 / 1 / 4 / 2; }  /* 占第3行，第1列 */
    #table-3 { grid-area: 4 / 1 / 5 / 2; }  /* 占第4行，第1列 */
    #table-4 { grid-area: 1 / 2 / 5 / 3; }  /* 占全部4行，第2列 */
    #table-5 { grid-area: 1 / 3 / 2 / 4; }  /* 占第1行，第3列 */
    #table-6 { grid-area: 2 / 3 / 3 / 4; }  /* 占第2行，第3列 */
    #table-7 { grid-area: 3 / 3 / 4 / 4; }  /* 占第3行，第3列 */
    #table-8 { grid-area: 4 / 3 / 5 / 4; }  /* 占第4行，第3列 */

    /* 所有表格统一填满父容器 */
    #dashboard table {
      width: 100%;
      height: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    #dashboard table th,
    #dashboard table td {
      padding: 8px 12px;
      text-align: left;
      border: 1px solid #ddd;
    }

    #dashboard table th {
      background-color: #f5f5f5;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div id="dashboard">
    <div id="table-1">
      <table>
        <thead><tr><th>指标A</th><th>值</th></tr></thead>
        <tbody><tr><td>收入</td><td>¥245,680</td></tr></tbody>
      </table>
    </div>
    <div id="table-2"> <!-- 同理替换为你的表格 --> ... </div>
    <div id="table-3"> ... </div>
    <div id="table-4"> ... </div>
    <div id="table-5"> ... </div>
    <div id="table-6"> ... </div>
    <div id="table-7"> ... </div>
    <div id="table-8"> ... </div>
  </div>
</body>
</html>

⚠️ 关键注意事项：