html - 表格内的行增长以使用所有可用的高度

Question

我在尝试按我想要的方式进行这项工作时遇到了麻烦。我有一张固定高度的 table 。我放在这张 table 里的所有 tr 都会增加高度以使用所有可用的 table 高度，尽管 tr 有一个特定的高度例如我的表格有 widht: 1000px 如果我只有 1 行，这一行将是 1000px 高，如果我有 2 行，每行将是 500px 高

这是一个简单的 fiddle https://jsfiddle.net/6wfbohbh/2/

table { height:1000px; }
tr {height: 100px; }

如何让 tr 使用它们的高度而不是相对于表格高度？

Answer 1

除非你需要，否则不要设置高度:

示例将标题缩小到它需要容纳内容并让其他行喷射的高度。

table {
  height:400px;/* to see demo */
  float:left; 
  border:solid red 1px;
  }
/* see tds */

td {border:solid;}

<table>
  <thead>
    <tr style="height:1%">
      <td>English</td>
      <td>Spanish</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>Hola</td>
    </tr>
     <tr>
      <td>Bye</td>
      <td>Adios</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr style="height:1%">
      <td>English</td>
      <td>Spanish</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>Hola</td>
    </tr>
     <tr>
      <td>Bye</td>
      <td>Adios</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>Hola</td>
    </tr>
  </tbody>
</table><table>
  <thead>
    <tr >
      <td>no height given on thead tr</td>
      <td>Spanish</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>Hola</td>
    </tr>
     <tr>
      <td>Bye</td>
      <td>Adios</td>
    </tr>
  </tbody>
</table>

这就是如果 td 的内容是偶数，你可以做什么......

---

如果你想将 tr 保持在 100px 的高度，即使没有足够的高度来保持它们，那么使用伪造来伪造最后一行:

tbody:after {
  content:'';
  display:table-row;
  height:100%;
  }

<table style="height:1000px;">
  <thead>
    <tr style="1%">
      <td>English</td>
      <td>Spanish</td>
    </tr>
  </thead>
  <tbody>
    <tr style="height: 100px;">
      <td>Hello</td>
      <td>Hola</td>
    </tr>
     <tr style="height: 100px;">
      <td>Bye</td>
      <td>Adios</td>
    </tr>
  </tbody>
</table>