html - 动态表不适合引导卡

Question

我在 bootstrap 卡中有数据表，但是当表大于卡的高度时，它会超出卡的外部。我有一个 overflow: auto 在 table-wrapper 上，一旦超过卡片高度也不会触发。

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

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>