桌子内的行增长到使用所有可用的高度

Question

我正试图以我想要的方式完成这项工作。 我有一张固定高度的桌子。并且我放在这个表中的所有 tr 都会增加高度以使用所有可用表的高度，尽管 tr 具有特定的高度 例如，我的表有 widht：1000px ，如果我只有1行，那么这行将是1000px高，如果我有2行，每行将是500px高

这是一个简单的小提琴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>

Answer 2

我不确定你的结果应该是什么样的，但如果你需要指定一个容器的宽度，为什么不使用div代替。这是您更新的示例：

https://jsfiddle.net/6wfbohbh/8/

＆＃13;

＆＃13;

<div style="height:1000px; background:lightblue">
<table style="background:lightgreen">
  <thead>
    <tr>
      <td>English</td>
      <td>Spanish</td>
    </tr>
  </thead>
  <tbody>
    <tr style="height: 50px;">
      <td>Hello</td>
      <td>Hola</td>
    </tr>
     <tr style="height: 50px;">
      <td>Bye</td>
      <td>Adios</td>
    </tr>
  </tbody>
</table>
</div>

＆＃13;

＆＃13;

＆＃13;