html - 调整表格行高，无论行数多少，100%填满表格

Question

我有一个包含 3 行或 4 行的表格，我希望该表格的设置高度为 280 像素。

有没有办法根据表格中的行数来让行的高度填满表格的高度？

为了更清楚，如果表格有 3 行，则每行的高度约为 33%，如果表格有 4 行，则每行的高度将为 25%。

Answer 1

这可以在纯 css 中完成。只需将父 div 的高度指定为 280px，并将表格的高度指定为 100%。

#wrapper {
  height: 280px;
}

.tableElem{
  height: 100%;
  border-collapse:collapse;
}

td {
  border: 1px solid black;
}

<div id="wrapper">
  <table class="tableElem">
    <tr>
      <td>a</td>
    </tr>
    <tr>
      <td>b</td>
    </tr>
    <tr>
      <td>c</td>
    </tr>
  </table>
</div>

<br /><br /><br />

<div id="wrapper">
  <table class="tableElem">
    <tr>
      <td>a</td>
    </tr>
    <tr>
      <td>b</td>
    </tr>
    <tr>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
    </tr>
  </table>
</div>