html - 如何拥有一个可滚动的表格，该表格从其父级获取高度(HTML + Bootstrap)

Question

我想使用标准 overflow: auto 使表格垂直滚动，但不必在表格容器上设置高度。

Bootstrap 有一个内置类 table-responsive 来处理水平滚动，但我不知道如何在没有最大高度的情况下直接在表格容器上进行垂直滚动。

这是基本的 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>