css - 在 Mat 表格中无法指定表格的高度并使页眉和页脚具有粘性

Question

我有一个带有 Header 的 Mat 表格，在表格下方我添加了一个 paginator 组件，我已将 paginator 组件调整为在两个图像中都可以看到的页脚。

现在的问题是，我希望 Rows 可以滚动，并将表 Header 和 Footer（即 Paginator 组件）固定在一个地方。

但目前如第二张图片所示，如果我选择 10 行，那么表格的高度会增加，并且我会在主 Div 上获得滚动。

努力了几个小时，但没能做到，我将把我写的确切代码放进去，这样它就可以更好地展示。

下面是我的html文件

<div class="outerDiv">
<div class="table-container">
  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <!-- Position Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>
  
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
  
    <!-- Weight Column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>
  
    <!-- Symbol Column -->
    <ng-container matColumnDef="phone">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Mobile Number </th>
      <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

<div class="paginator">
  <mat-paginator [length]="2"
  [pageSize]="5"
  [pageSizeOptions]="[5, 10]">
</mat-paginator>
</div>

</div>

下面是我的css文件

.mat-table {
  overflow: auto;
  max-height: 500px;
}
  
  th.mat-sort-header-sorted {
    color: black;
  }

  .table-container{
    margin-top: 10px;
    max-height: 300px;
    overflow: auto
  }
 

  .outerDiv{
    display: block;
    padding-left: 226px;
    padding-top: 67px;
    padding-bottom: 67px;
  }

  .paginator{
    margin-right: 155px;
    width: 100%;
    max-width: 80%;
    position: sticky;
  }

现在有 10 行的表

标签： cssangularangular-materialangular8

Answer 1

正如我之前所说，Scroll 即将出现在 div 上，因为该 div 中有一个表格以及垂直方向的 (30+30) px 的上下填充，如下图所示。

我们可以通过 2 个解决方案来解决这个问题

1. 使用边距而不是填充，因为我们知道边距是任何 div 之外的空间，但在这种情况下，它与填充空间相同。

   .example-container { 高度：300px; 溢出：自动；边距：30px }

请查看下图以了解上述代码的结果。

2. 解决此问题的第二种方法是在外面创建另一个 divexample-container并在其中添加填充，而 overexample-container将包裹表格。在此处查看 stackblitz 代码