Evenly distribute extra table height-CodePudding

When making an HTML table grow to 100% height, is there a way to distribute the extra space evenly?

Currently, as shown below, the row with the tallest content (row 2) gets the majority of the extra space. And the empty row (row 3) gets almost 0 extra space. Can I change that so it's distributed evenly?

i.e. If I've got 4 rows, and an extra 100px to fill (table takes 200px when height isn't set to 100%, and 300px when it is set to 100%), is there a way for each row to grow by 25px regardless of its content?

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

CodePudding user response：

You can set same height by percent for <tr> elements.

(In major browsers it is also tolerant to more rows you just need to set equal value for all not exactly 25% but a value equal or less than 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>