动态表不适合引导卡答案

【问题标题】：Dynamic table doesn't fit in bootstrap card动态表不适合引导卡
【发布时间】：2020-08-22 19:43:45
【问题描述】：

我在引导卡内部有数据表，但是当表格大于卡的高度时，它会超出卡的外部。我有一个溢出：自动表格包装器，一旦超过卡片高度也不会触发。

这是一个简化的例子： https://stackblitz.com/edit/js-bootstrap4-gbnhfx?file=style.css

【问题讨论】：

您必须将其包裹在高度可控的容器中，例如<div class="table-wrap"> <div style="height: 690px"> <table class="table table-sm table-dark table-striped"> 参考：stackblitz.com/edit/js-bootstrap4-tsnbuq
你应该分页你的内容，而不是试图适应
我同意@HienNguyen，如果你有很多行滚动可能会很痛苦，你应该考虑将数据分页到卡片中，但如果你“只是”有太多可能滚动更容易/更好 - 你更了解你的数据......
分页是个好主意，但它不是一个选项，因为我只是按照命令执行，反正它只有 2 页，所以我不认为滚动会很痛苦。同样@developer，您的解决方案可悲的是没有做到这一点，我试图不使用固定高度。
您能否详细说明为什么它不起作用？就您已经添加的内容而言，它在 stackblitz 中起作用。你能提供更多细节，看看我能不能帮忙？

标签： html css bootstrap-4

【解决方案1】：

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

为了简单起见，我在这里使用了样式 attr。但是内部 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>

【讨论】：