如何在单页HTML中合理布局8个独立表格？求技术方案

云原生阿岚

2026-8-1

8个表格的排版实现方案

下面提供两种现代CSS布局方案，可轻松实现规整的多表格排版：

方法一：CSS Grid 布局（推荐）

Grid天生适配网格类布局，能精准控制行列结构，完美匹配8个表格的排版需求：

给所有表格套一个父容器，HTML结构如下：

<div class="table-grid">
  <table><!-- 表格1内容 --></table>
  <table><!-- 表格2内容 --></table>
  <table><!-- 表格3内容 --></table>
  <table><!-- 表格4内容 --></table>
  <table><!-- 表格5内容 --></table>
  <table><!-- 表格6内容 --></table>
  <table><!-- 表格7内容 --></table>
  <table><!-- 表格8内容 --></table>
</div>

编写Grid样式：

.table-grid {
  display: grid;
  /* 4列均分宽度，可替换为固定值如240px */
  grid-template-columns: repeat(4, 1fr);
  /* 行列间距，按需调整 */
  gap: 18px;
  /* 容器内边距，避免表格贴边 */
  padding: 20px;
}

/* 统一表格基础样式（可选） */
.table-grid table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eee;
}

.table-grid th, .table-grid td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

如果需要个别表格跨列/跨行，只需给目标表格加类并设置：

.table-span-2 {
  grid-column: span 2; /* 跨2列 */
}

方法二：Flexbox 布局

适合需要灵活换行的场景，浏览器兼容度更广：

复用上述父容器结构，编写Flex样式：

.table-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 20px;
}

.table-flex table {
  /* 每个表格占25%宽度，减去gap分摊值，确保4个一行 */
  flex: 0 0 calc(25% - 13.5px);
  border-collapse: collapse;
  border: 1px solid #eee;
}

/* 响应式适配：屏幕较小时改为2个一行 */
@media (max-width: 768px) {
  .table-flex table {
    flex: 0 0 calc(50% - 9px);
  }
}