如何使用HTML5、CSS3消除动态表格列中的空白区域？

嘿，我来帮你搞定这个表格里的空白区域问题！你遇到的情况是因为给嵌套表格和单元格都设置了height:100%，这会强制所有同行单元格继承最高列的高度，哪怕自身内容很少，自然就会留出多余空白。下面给你几个实用的解决方案：

方案1：移除强制高度设置，让表格自适应内容 #

这是最直接的修复方式——把你代码里所有的height:100%样式全部删掉，让每个单元格只根据自身内容的高度来渲染，这样就不会被强制拉伸了。

修改后的代码示例：

<td style="text-align: center;">
  <table style="border-collapse:collapse; margin: -6px -14px -7px -11px; width:100%;">
    <tr>
      <td>
        <table style="width:100%">
          <tr>
            <td ng-repeat="--">
              -- multiple div and span blocks used to loop multiple times --
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</td>

方案2：用Flexbox替代嵌套表格（更现代的布局方式） #

嵌套表格做布局本身就容易引发这类高度拉伸问题，推荐你用更灵活的Flexbox来重构这部分布局，它能让每列只占据自身内容需要的高度：

<td style="text-align: center;">
  <div style="display: flex; gap: 8px; width: 100%;">
    <div ng-repeat="--" style="flex: 1;">
      -- multiple div and span blocks used to loop multiple times --
    </div>
  </div>
</td>

这样每个循环生成的内容块都会自适应自身高度，不会出现多余空白，后续维护也更方便。

额外小技巧 #

如果因为业务需求必须保留表格结构，除了移除height:100%，还可以给单元格加上vertical-align: top，让内容顶对齐，视觉上会大大降低空白的突兀感：

td {
  vertical-align: top;
}

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