本文介绍如何利用 css grid 精确控制页面上 8 个独立表格的布局，实现类似四行三列（含跨区域）的响应式网格排布，兼顾结构清晰性与视觉一致性。
在现代网页开发中，将多个表格（尤其是语义与数据彼此独立的表格）整齐、可控地组织在同一页面上，不应依赖过时的 <table> 嵌套或浮动布局，而应采用语义清晰、控制力强的 CSS Grid。针对 8 个表格需按特定区域分布（如图示：左上双行高、右侧纵向堆叠、中部宽幅占位等），Grid 的 grid-area 定位是最直接高效的方案。
✅ 推荐实现步骤
包裹容器启用 Grid：为外层容器（如 #container）设置 display: grid，并定义整体网格轨道；
-
合理划分行列比例：根据视觉权重分配 grid-template-rows 与 grid-template-columns。例如：
grid-template-rows: 30% 30% 25% 15%; /* 四行，高度递减 */ grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
-
为每个表格容器指定精确区域：使用 grid-area: row-start / col-start / row-end / col-end（注意：行/列号从 1 开始计数）。例如：
立即学习“前端免费学习笔记（深入）”；
- 左上大表（占第1–2行、第1列）→ grid-area: 1 / 1 / 3 / 2;
- 右侧纵向四表（各占1行、第3列）→ 分别设为 1/3/2/4、2/3/3/4、3/3/4/4、4/3/5/4
-
确保表格自适应填充：对所有 table 元素设置：
#container table { width: 100%; height: 100%; border-collapse: collapse; /* 可选：优化边框显示 */ }
? 完整精简示例（含 HTML + CSS）
<!DOCTYPE html>
<html>
<head>
<style>
html, body { margin: 0; padding: 0; }
#container {
display: grid;
grid-template-rows: 30% 30% 25% 15%;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px; /* 推荐添加适度间距，提升可读性 */
width: 100vw;
height: 100vh;
padding: 12px;
}
/* 每个 div 对应一个表格容器，按需调整 grid-area */
#div1 { grid-area: 1 / 1 / 3 / 2; }
#div2 { grid-area: 3 / 1 / 4 / 2; }
#div3 { grid-area: 4 / 1 / 5 / 2; }
#div4 { grid-area: 1 / 2 / 5 / 3; }
#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;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"><table><tr><td>Table 1</td><td>Data</td></tr></table></div>
<div id="div2"><table><tr><td>Table 2</td></tr></table></div>
<div id="div3"><table><tr><td>Table 3</td></tr></table></div>
<div id="div4"><table><tr><td>Table 4</td><td>Wide</td></tr></table></div>
<div id="div5"><table><tr><td>Table 5</td></tr></table></div>
<div id="div6"><table><tr><td>Table 6</td></tr></table></div>
<div id="div7"><table><tr><td>Table 7</td></tr></table></div>
<div id="div8"><table><tr><td>Table 8</td></tr></table></div>
</div>
</body>
</html>⚠️ 注意事项与优化建议
- 移除调试样式：示例中 background-color 和 100vh/100vw 仅用于可视化定位，上线前请删除或替换为实际尺寸约束（如 min-height: 800px）；
- 响应式增强：可在 @media 查询中为小屏幕切换为单列堆叠（grid-template-columns: 1fr），保障移动端可用性；
- 可访问性提醒：每个 <table> 应包含 <caption> 或 aria-label，明确说明其数据主题；
- 性能提示：避免对大量表格强制 height: 100% 导致重排压力；若内容高度差异大，可改用 min-height + flex 内部居中。
通过 Grid 布局，你不仅解决了“8 表格定位难”的问题，更构建了可维护、可扩展、符合现代标准的多数据视图结构。
