如何消除行数不一的自定义HTML表格上下冗余空白？

核心解法：用grid-auto-flow: dense+自适应行高填充空白 #

你遇到的问题本质是Grid默认按顺序布局，当不同表格高度不一的时候，高表格占的行空间会让矮表格下方留下空白，用grid-auto-flow: dense就能让Grid自动把后面的表格塞进前面的空白区域，再配合自适应行高，就能让所有表格填满垂直空间。

修改后的CSS示例 #

假设你的容器是.table-container，自定义表格类是.table：

.table-container {
  display: grid;
  /* 按你的需求设置列数，比如3列，保持所有表格列数统一 */
  grid-template-columns: repeat(3, 1fr);
  /* 网格间距，自己调合适的大小 */
  gap: 1.5rem;
  /* 关键：开启密集布局，自动填补空白 */
  grid-auto-flow: dense;
  /* 行高随内容自适应，不强制等高 */
  grid-auto-rows: auto;
}

.table {
  /* 模拟表格的基础样式，这里列数要和所有表格一致 */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 替换成你实际的列数 */
  border: 1px solid #eee;
}

/* 表格单元格样式，按需调整 */
.table .cell {
  padding: 0.8rem;
  border-bottom: 1px solid #eee;
}

为什么这招管用 #

• grid-auto-flow: dense：Grid会扫遍所有空出来的网格位置，把能放进去的表格填进去，不会因为前面表格高就留着垂直空白。
• grid-auto-rows: auto：每一行的高度由该行里最高的表格决定，不会硬拉所有行等高，最大化利用垂直空间。
• 固定列数的grid-template-columns：保证所有自定义表格的列对齐，符合你列数一致的要求。

备选方案：用Flexbox更简单 #

要是觉得Grid的dense逻辑有点绕，也可以用Flexbox做换行布局，给每个表格设固定宽度：

.table-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.table {
  /* 3列的话就是33.33%，减去gap的一半保证间距正确 */
  flex: 0 0 calc(33.33% - 1rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 对应你的表格列数 */
  border: 1px solid #eee;
}

这个方案里表格会按顺序换行，高度自动适应内容，不会留垂直空白，后面加新表格也能自动排进去。

注意点 #

• 所有.table的列数设置必须一致，不然列会歪。
• Flexbox方案里调整gap的时候，要同步改宽度的计算值，Grid方案就不用这么麻烦。

内容的提问来源于stack exchange，提问作者lbake16