在顶部堆叠tbody

Question

我有一个固定高度和可变数量的tbody元素的表。

table {
  border:1px solid black;
  height:300px;
}

默认情况下，页面会增加第一个tbody的高度以填充表格的总高度（演示：http://jsfiddle.net/hvdcz8qr/）。如何将所有tbody元素堆叠在表格顶部，并将额外高度保持在tbody元素下方？

在我的情况下，使用table和tbody以外的元素不是一个选项。

[更新]我在我的示例中添加了第二列：http://jsfiddle.net/hvdcz8qr/10/

Answer 1

您可以将display的{​​{1}}设置为tbody

block

修改

为了让td使用所有空间：

table tbody { 
    display: block
}

New JSFiddle

Answer 2

在我的建议中发表评论后试试这个：

＆＃13;

＆＃13;

table {
  border: 1px solid black;
  height: 300px;
}
td {
  border: 1px solid red;
}
tbody {
  float: left;
  clear: left;
  width: 100%;
  display: inherit;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>First tbody
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>second tbody
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>third tbody
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

设置width: 100%和display: inherit以获取整个表格宽度。