使用 css grid 可精准控制 8 个表格在单页中的位置与尺寸，通过 `grid-area` 指定每个表格所在区域，配合响应式行列定义（如 `30% 30% 25% 15%` 行高 + `1fr 1fr 1fr` 列宽），实现灵活、语义清晰且无需浮动或绝对定位的现代化布局。
在现代网页开发中，将多个表格（尤其是功能或数据维度各异的 8 个独立表格）整齐、可控地排布在单页上，已不再依赖过时的 <table> 嵌套布局或易失控的 float 技术。CSS Grid 是当前最推荐、最直观且最具表现力的解决方案——它允许你以“网格容器 + 网格项”的方式，像设计画布一样规划每一部分的空间归属。
✅ 推荐实现：基于 Grid 的语义化容器布局
核心思路是：
- 创建一个全屏（或自定义尺寸）的 #container 作为 Grid 容器；
- 将每个表格包裹在独立 <div> 中（提升可维护性与样式隔离性）；
- 使用 grid-area: row-start / col-start / row-end / col-end 精确指定每个 <div> 占据的网格区域；
- 所有表格设置为 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;），并启用垂直滚动；
- 可访问性：确保每个 <table> 包含语义化结构（<thead>/<tbody>）、<caption> 或 aria-label，便于屏幕阅读器识别；
- 性能提示：避免对大量表格使用 height: 100% 导致重排压力；如内容高度不固定，可改用 min-height 或 flex 内部对齐；
- 替代方案对比：Flexbox 更适合一维布局（如单行/列排列），而本例需二维精确定位，Grid 不仅更简洁，也天然支持跨行跨列，是唯一合理选择。
通过以上方式，你不仅能完美复现参考图中的布局结构，还能获得良好的可维护性、可扩展性与现代浏览器兼容性（Chrome/Firefox/Safari/Edge 均原生支持）。告别“表格嵌套表格”的反模式，拥抱 Grid —— 让布局回归逻辑，而非hack。
立即学习“前端免费学习笔记（深入）”；
