Как получить прокручиваемую таблицу, которая берет высоту от своего родителя (HTML + Bootstrap)

Question

Я хотел бы сделать таблицу с вертикальной прокруткой, используя стандартное переполнение: auto, но не нужно устанавливать высоту для контейнера таблицы.

Bootstrap имеет встроенный класс, реагирующий на таблицу, для обработки горизонтальныхпрокрутка, но я не могу понять, как сделать вертикальную прокрутку без максимальной высоты прямо на контейнере таблицы.

Вот основные HTML и BS:

    <div class="card card-bordered m-3 w-50" style="height: 400px">
      <div class="card-body px-3 pt-2 pb-0">
        <div class="table-responsive" style="overflow: auto">
          <table class="table table-bordered table-sm mb-0">
            <thead>

и воткод полной карты: https://codepen.io/Daggett/pen/wvvJxpp

Как видно, если добавить в таблицу больше строк tr, прокрутка не будет.

Answer 1

Я переместил height:400px в 'card-body' и применил height:100% к table-responsive. Таким образом, заголовок может оставаться на фиксированной высоте, а таблица может расширяться до 400px высоты родительского элемента.

https://codepen.io/anijack/pen/YzzZOWE

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card card-bordered m-3 w-50">
  <!-- Can use w-25, w-50, w-75, w-100 to set width - use max-height CSS to set the height of the card -->

  <div class="card-header px-3 pt-2 pb-0 d-flex justify-content-between align-items-center" style="height: 44px">
    <!-- Fix the height of the header -->
    <h4 class="mb-0">Visualize data</h4>

  

  </div>

  <div class="card-body px-3 pt-2 pb-0" style="height: 400px">
    

    <div class="table-responsive" style="overflow: auto;height:100%;">
      <table class="table table-bordered table-sm mb-0">
        <thead>
          <tr>
            <th class="text-nowrap" scope="col">
              Tenor
              <button class="btn btn-flat-primary btn-sm ml-2">
                <i class="icon">add</i>
              </button>
            </th>
            <th class="text-right px-3" scope="col">1Y</th>
            <th class="text-right px-3" scope="col">2Y</th>
            <th class="text-right px-3" scope="col">3Y</th>
            <th class="text-right px-3" scope="col">5Y</th>
            <th class="text-right px-3" scope="col">8Y</th>
            <th class="text-right px-3" scope="col">10Y</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              01 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              02 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              03 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
          <tr>
            <th class="text-secondary text-nowrap" scope="row">
              04 Mar 19
            </th>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
            <td class="text-right px-3">00.00</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>


  <div class="card-footer px-3 py-0 border-top d-flex justify-content-between align-items-center" style="min-height: 48px">

    <button class="btn btn-link px-1">Clear</button>
  </div>

</div>