html - 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-left类为height: 95vh;的div定义了一个固定的高度。 tbody 由带有内容 (tr/td) 的 JavaScript 函数填充。

我要实现:

• 表格填充div内的剩余空间
• tbody 的水平溢出应该由 h-scrollbar 处理(只滚动 tbody!)

如果我也给 tbody 添加一个固定的高度，并给它一个样式 display: block; overflow-y: auto; 滚动就像一个魅力。不幸的是，如果我删除固定表/tbody 的高度，使其填充 div 中的剩余空间 => 它会超出 div 并且 tbody 永远不会变得可滚动(相反，表只是溢出 div 并且页面 h-scrollbar 是现在)。

有什么想法吗？

Answer 1

.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>