在 Mat table 中无法指定 table 的高度并使页眉和页脚变粘

Question

我有一个带页眉的垫子 table，在 table 下面我添加了一个分页器组件，我已经将分页器组件调整为在两个图像中都可以看到的页脚。

现在的问题是我希望行可以滚动，tables 页眉和页脚（即分页器组件）固定在一个地方。

但目前如第二张图片所示，如果 I select 10 行 然后 table 的高度增加并且我得到滚动主要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;
  }

现在 table 有 10 行

Answer 1

这纯粹是一个 css 问题。为了使 header 变粘，将粘性添加到 mat-header-row

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"> 
</tr>

要使分页器粘性包装 table 在 div 中并将分页器放在 div 之外（确保将 mat-elevation-z0 class 添加到 table 所以 table 和分页器之间没有阴影或者在 table 和分页器中添加自定义阴影 class).

我已经为您更新了 stackblitz（请以全尺寸屏幕查看）。

Answer 2

我只是根据@shashank sharma 解决方案想出了解决方案

但还有一半...!!没有成功

下面是link

https://stackblitz.com/edit/angular-72dlr3-needdq

我刚刚回答这个问题，因为下一个回答的人必须通读整个对话，但不会批准或编辑这个..!!

问题是

到处都提供相同的示例，但滚动到包含 table 但不包含 table 本身的 div
粘性 header 和页脚效果不佳..!!
内容向上滚动到 header..!!

Answer 3

正如我之前所说的，Scroll 即将开始 div 因为 div 中有一个 table 以及垂直方向的 (30+30) 像素的上下填充方向如下图所示。

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

使用边距而不是填充，因为我们知道边距是 spaces 在任何 div 之外而不是在内部，但在这种情况下它与填充 space 的工作方式相同.

.示例容器{ 高度：300px；溢出：自动； margin:30px }

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

解决此问题的第二种方法是在 example-container 之外创建另一个 div 并向其添加填充，而超过 example-container 将包裹 table。查看 stackblitz 代码 here

在 Mat table 中无法指定 table 的高度并使页眉和页脚变粘

In Mat table Not able to specify height of the table and make the header as well as footer sticky

css

angular-material

angular

angular8