如何在单页 HTML 中优雅布局 8 个独立表格-html教程-PHP中文网

如何在单页 HTML 中优雅布局 8 个独立表格

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

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

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

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

核心思路是：

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

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

人民网AIGC-X

国内科研机构联合推出的AI生成内容检测工具

下载

<!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>