如何让设置100%高度的HTML table将多余高度均匀分配给各行

可以实现，仅通过CSS调整即可满足需求，不需要引入JavaScript逻辑。

核心调整点 #

• 给table元素添加table-layout: fixed属性，开启表格固定布局模式，替换默认的内容优先的自动布局规则
• 给所有tr设置统一的高度占比：固定行数时直接设置对应百分比即可，行数动态不确定时设置height: 1%也能实现自动均分效果

修改后的完整代码 #

CSS部分 #

#parent {
  height: 800px;
}

table {
  height: 100%;
  /* 固定布局模式下建议明确设置表格宽度，避免单元格宽度计算异常 */
  width: 100%;
  table-layout: fixed;
}

td {
  border: 1px solid black;
  vertical-align: top;
}

tr {
  /* 4行固定时设置25%，动态行数替换为 height: 1% 即可 */
  height: 25%;
}

HTML部分（无需修改，和原有代码一致） #

<div id="parent">
  <table>
    <tr><td> 1) Single Line</td></tr>
    <tr><td> 2) Four<br>Lines<br>of<br>Text</td></tr>
    <tr><td><!--empty cell--></td></tr>
    <tr><td> 4) Two<br>Lines</td></tr>
  </table>
</div>

效果说明 #

默认自动布局模式下，表格的剩余高度会优先分配给内容高度更高的行，空行几乎分配不到多余空间。开启固定布局后，表格会先保证每行的高度不小于自身内容的最小展示高度，剩下的多余高度会完全均匀分配给每一行，完全符合你举例的场景：总高多出100px时，4行每行各额外增加25px高度。

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