动态表格不适合于Bootstrap卡片。

Question

我在Bootstrap卡片中嵌入了数据表格，但是当表格高度超过卡片高度时，它会超出卡片范围。我在一个表格包装器上设置了overflow: auto，但是一旦超出卡片高度，它也不会触发。

以下是简化的示例： https://stackblitz.com/edit/js-bootstrap4-gbnhfx?file=style.css

- r0699049

---

你需要将其包装在一个高度可控的容器中，例如 <div class="table-wrap"> <div style="height: 690px"> <table class="table table-sm table-dark table-striped">。 - developer

您应该对内容进行分页，而不是试图适应一页显示。 - Hien Nguyen

我同意 @HienNguyen 的观点，如果你有很多行的话，滚动可能会让人痛苦不堪，因此你应该考虑将数据分页到卡片中。但是，如果你只是稍微超出了一点点，那么滚动可能更容易/更好 - 你更了解你的数据... - developer

分页是个好主意，但由于我只是按照命令行动，所以这不是一个选项。而且，总共只有两页，所以我认为滚动也不会太麻烦。另外，@developer，你的解决方案可惜没有起作用，我尽量避免使用固定高度。 - r0699049

因为我不想给它一个固定的高度。 - r0699049

Answer 1

我已经fork了你的stackblitz (https://stackblitz.com/edit/js-bootstrap4-tsnbuq)

我在这里使用了样式属性来简化。但是内部div是溢出的项目，然后你的外部div（你有CSS处理溢出）正在添加滚动条。

这是主要更改：

<div class="table-wrap">
  <div style="height:690px">
    <table class="table table-sm table-dark table-striped">
      <thead>
      </thead>
      <tbody>
          <tr>
              <td>test</td>
          </tr>
      </tbody>
    </table>
  </div>
</div>

- developer