div中的表格，是否在溢出时滚动？

Question

我有以下HTML：

<div class="gv-left col-lg-4">
    <h2>Title</h2>
    <table class="table table-hover table-condensed">
        <thead>
            <tr><th>ID</th></tr>
        </thead>
        <tbody id="songs">
        </tbody>
    </table>
</div>

div是Bootstrap流体容器中Bootstrap行的子行。div上的gv-↓类为高度的div定义了固定高度：95vh；。tbody由带有内容（tr/td）的JavaScript函数填充。

我想要实现：

• 表格填充div中的剩余空间

如果我也给tbody添加一个固定的高度，并给它一个显示：块；溢出y：自动；的样式，滚动就像一个魅力。不幸的是，如果我删除固定表/tbody的高度，使其填充div=中的剩余空间

有什么想法吗？

Answer 1

css prettyprint-override">.table-wrapper {
  border: 1px solid red;
  width: 100px;
  height: 50px;
  overflow: auto;
}
table {
  border: 1px solid black;
  margin-right: 20px;
}
td {
  width: 20px;
  height: 20px;
  background-color: #ccc;
}

<div class="table-wrapper">
  <table>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
  </table>
</div>