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滚动条处理（仅滚动tbody！）

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

有什么想法吗？

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

在div中的表，滚动溢出？

1 个答案: