Table 行增长到最大值？

Question

<html>
<body style="background: white;">
<table style="height: 100%;width: 100%;">
  <tbody>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  </tbody>
</table>
</body>
</html>

结果：

（这是粘贴到新标签中的，因此没有额外的 Css 样式或任何其他内容）

如何阻止行增长到最大高度，而不是增长到内容高度？（最好不要为行设置固定的 20px 高度）

编辑：我希望 table 仍然填满整个页面

Answer 1

Height 100% is not required Remove it to take the minimum size table requires

Answer 2

您可以尝试使用 flexboxes 来实现：

table,
tr {
  display: flex;
  width: 100%;
}

tbody {
  width: 100%;
}

th,
td {
  display: inline-flex;
  flex-grow: 1;
}

<body style="background: white;">
  <table style="height: 100%; width: 100%">
    <tbody>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
    </tbody>
  </table>
</body>

请注意，您将失去一些 table 功能。

Table 行增长到最大值？

Table rows growing to max?

html

css

html-table