平均分配额外的桌子高度答案

【问题标题】：Evenly distribute extra table height平均分配额外的桌子高度
【发布时间】：2021-09-29 17:19:18
【问题描述】：

当让 HTML 表格增长到 100% 高度时，有没有办法平均分配多余的空间？

目前，如下所示，内容最高的行（第 2 行）获得了大部分额外空间。空行（第 3 行）获得几乎 0 的额外空间。我可以更改它以使其均匀分布吗？

即如果我有 4 行，并且要填充额外的 100 像素（当高度未设置为 100% 时表格需要 200 像素，设置为 100% 时需要 300 像素），有没有办法无论内容如何，每行都增长 25 像素？

#parent {
  height: 800px;
}

table {
  height: 100%;
}

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

<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>

【问题讨论】：

标签： html css-tables

【解决方案1】：

您可以按百分比为<tr> 元素设置相同的高度。

（在主流浏览器中，它也可以容纳更多行，您只需为所有不完全是 25% 而是等于或小于 100% / number of rows 的值设置相等的值）

#parent {
  height: 800px;
}

table {
  height: 100%;
}
tr {
  height:10%
 }

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

<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>

【讨论】：