平均分配额外的 table 高度

Question

当 HTML table 增长到 100% 高度时，有没有办法平均分配额外的 space？

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

即如果我有 4 行，并且要填充额外的 100px（table 在高度未设置为 100% 时占用 200px，在设置为 100%[=26= 时占用 300px ]), 有没有办法让每行增长 25px 而不管它的内容？

#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></td></tr> <tr><td> 4) Two<br>Lines</td></tr> </table> </div>

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

平均分配额外的 table 高度

Evenly distribute extra table height

html

css-tables