如何拥有一个可滚动的表格，该表格从其父表格获取高度（HTML + Bootstrap）

Question

我想使用标准溢位：自动使桌子垂直滚动，但不必在桌子的容器上设置高度。

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:100%移至“卡体”，并将table-responsive应用于400px。这样一来，标头就可以保持其固定高度，表格可以扩展到父级的<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>高度。

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

     <ng-container [matColumnDef]="col" *ngFor="let col of tableView.columns;let i=index;let last=last">
            <mat-header-cell *matHeaderCellDef>{{col}}</mat-header-cell>
            <mat-cell  [class]="tRow.cells[i].classes" *matCellDef="let tRow">
             <span *ngIf="!last">{{ tRow.cells[i].text }}</span>
             <span *ngIf="last">{{ tRow.cells[i].text |currency}}</span>
            </mat-cell>       
            <mat-footer-cell *matFooterCellDef>{{ tableView.footer.cells[i].text}}</mat-footer-cell>      
     </ng-container>

Answer 2

找到解决方案：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w-50 border m-5 d-flex flex-column" style="height: 400px; flex-shrink: 0; flex-grow: 0">


  <!-- Header takes height of content, height is fixed by flex-shrink and flex-grow -->
  <div class="d-flex justify-content-between align-items-center p-3" style="flex-shrink: 0; flex-grow: 0">
    <h4 class="mb-0">Title</h4>
  </div>


  <!-- Can add more divs with height taken from their content, fixed with flex -->
  <div class="mb-2 px-3 d-flex align-items-center" style="flex-shrink: 0; flex-grow: 0">
    <input type="text" class="form-control" placeholder="input">
  </div>


  <!-- Now set body that has the variable size, using flex-grow-1 to fill the space  -->
  <div class="d-flex flex-grow-1">
    <!-- Set overflow  -->
    <div class="mx-3" style="overflow: auto">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam vestibulum morbi blandit cursus risus. Consequat nisl vel pretium lectus quam. Commodo ullamcorper a lacus vestibulum sed.
        Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Aliquet bibendum enim facilisis gravida neque convallis a cras. Pulvinar mattis nunc sed blandit libero. Euismod
        lacinia at quis risus sed vulputate odio ut. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Tellus pellentesque eu tincidunt tortor aliquam nulla. Euismod elementum nisi quis eleifend quam adipiscing vitae proin.
        Nisi porta lorem mollis aliquam ut porttitor leo. Leo duis ut diam quam nulla porttitor massa id. Tristique risus nec feugiat in fermentum posuere. Diam sit amet nisl suscipit adipiscing bibendum. Duis convallis convallis tellus id interdum velit.
        Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Nec dui nunc mattis enim ut tellus elementum. Bibendum enim facilisis gravida neque. Nec tincidunt praesent semper feugiat nibh. Adipiscing bibendum est ultricies integer
        quis. Ridiculus mus mauris vitae ultricies leo integer. Ac felis donec et odio pellentesque diam volutpat commodo. Sagittis aliquam malesuada bibendum arcu. Tellus in hac habitasse platea dictumst vestibulum. Urna condimentum mattis pellentesque
        id nibh tortor. Augue interdum velit euismod in pellentesque massa. Viverra nibh cras pulvinar mattis nunc sed. Aliquet nibh praesent tristique magna sit amet purus gravida quis. Lacinia quis vel eros donec ac odio tempor. Enim blandit volutpat
        maecenas volutpat. Cursus sit amet dictum sit amet justo donec enim diam. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Tempor id eu nisl nunc. Pretium aenean pharetra magna ac. Duis at tellus at urna. Leo integer malesuada
        nunc vel risus commodo viverra maecenas accumsan. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Elit eget gravida cum sociis natoque penatibus et magnis dis. Vitae justo eget magna fermentum iaculis eu non. Ipsum faucibus vitae
        aliquet nec. Sed vulputate mi sit amet mauris commodo quis. Volutpat lacus laoreet non curabitur gravida arcu. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Ultricies lacus sed turpis tincidunt id aliquet. Sed velit dignissim sodales
        ut eu sem. Et leo duis ut diam quam. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Cursus in hac habitasse platea dictumst quisque. Ac felis donec et odio pellentesque diam. Urna neque viverra justo nec ultrices. Vel orci porta non pulvinar.
        Id diam vel quam elementum. Egestas erat imperdiet sed euismod nisi. Ut ornare lectus sit amet est placerat. Adipiscing at in tellus integer feugiat. Magna etiam tempor orci eu lobortis. Eget nullam non nisi est sit. Id diam vel quam elementum
        pulvinar. Massa eget egestas purus viverra accumsan in nisl. Urna et pharetra pharetra massa. Velit egestas dui id ornare. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Duis at tellus at urna condimentum mattis pellentesque.
        Ut etiam sit amet nisl purus in mollis nunc. Risus nec feugiat in fermentum posuere. Feugiat in ante metus dictum. Arcu non odio euismod lacinia at. Enim nunc faucibus a pellentesque sit amet. Enim diam vulputate ut pharetra sit amet aliquam.
        Venenatis tellus in metus vulputate eu scelerisque felis. Ultricies integer quis auctor elit. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Sollicitudin aliquam
        ultrices sagittis orci a. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Diam in arcu cursus euismod quis viverra nibh. Egestas dui id ornare arcu odio. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque varius
        morbi enim nunc faucibus a pellentesque sit. Rhoncus aenean vel elit scelerisque mauris pellentesque. Venenatis urna cursus eget nunc scelerisque. Interdum consectetur libero id faucibus nisl tincidunt eget. Arcu cursus euismod quis viverra nibh
        cras pulvinar mattis nunc. Arcu vitae elementum curabitur vitae nunc sed velit. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Est sit amet facilisis magna etiam tempor orci eu. Ac turpis egestas integer eget aliquet. Vel orci porta non
        pulvinar neque laoreet suspendisse interdum consectetur. Auctor eu augue ut lectus arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Vulputate odio ut enim blandit. Sed ullamcorper morbi tincidunt ornare massa. Scelerisque felis imperdiet
        proin fermentum leo vel orci.
      </p>
    </div>
  </div>


  <div class="px-3 py-2 border-top" style="flex-shrink: 0; flex-grow: 0">
    <p class="mb-0">Footer</p>
  </div>

</div>

有必要在内容容器中添加d-flex flex-grow-g，然后在内容上进行overflow：auto。

要固定非可变零件的高度，flex-shrink：0; flex-grow：停止调整大小必须为0。