Стол Dynami c не помещается в карточку bootstrap

Question

У меня есть таблицы данных внутри bootstrap карточек, но когда таблица больше, чем высота карточки, она выйдет за пределы карточки. У меня есть overflow: auto на обертке таблицы, которая также не срабатывает после превышения высоты карты.

вот упрощенный пример: https://stackblitz.com/edit/js-bootstrap4-gbnhfx?file=style.css

Answer 1

Я раздвоил вам 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>