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

Posted 2023-03-06

【中文标题】在 Mat 表格中无法指定表格的高度并使页眉和页脚具有粘性

【英文标题】：In Mat table Not able to specify height of the table and make the header as well as footer sticky

【发布时间】：2020-11-04 19:23:46

【问题描述】：

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

现在的问题是，我希望 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 行的表格

【参考方案1】：

这是一个纯粹的 CSS 问题。为了使标题具有粘性，请将粘性添加到 mat-header-row

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

在 div 中制作分页器粘性包装表并将分页器放在该 div 之外（确保将 mat-elevation-z0 类添加到表中，以便表和分页器之间没有阴影，或者在表和分页器中添加自定义阴影类）。

我已为您更新了stackblitz（请全屏查看）。

【讨论】：

样式不起作用因为我检查了几个小时的不同 css 和 stackBlitz 示例并没有满足粘性页眉和粘性页脚..!!

外层div上有两个卷轴看得很清楚，页脚似乎很粘

我刚刚更新了我的问题因为我现在更接近答案我只是将表格包装在名为 table-container 的 div 中并更新了 css 文件我认为您可以复制我的 css 类并可以更新你的 stackBlitz 中的 html 和 css 文件，看看哪里有错误..!!

你能创建一个你当前代码的堆栈闪电战，以便我可以调试。

我复制了与您相同的示例，但是通过应用一些样式它出错了首先观察到，当我们将页面大小增加到 10 时，表格 div 的高度会增加，只需将 padding:30px 应用于示例容器 div 然后将页面大小设置为 10 滚动到外部 div 而不是 table 感谢合作

【参考方案2】：

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

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

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

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

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

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

【讨论】：

是的，谢谢您的回答，我做了同样的事情，但我只想请求您将 mat-elevation-z8 类添加到分页器组件以及表中，我尝试应用它但尽快当我选择每页 10 的项目时，表格高度略高于表格，因此请在分页器和表格中添加 mat-elevation-z8 类并检查它。

请通过添加表格以及表格上升到分页器组件上方的表格来帮助我处理电梯类，同时选择 10 作为每页的项目

将它应用到外部 div 我在这个 asnwer 中更新了 stackblitz 示例

这个答案对任何初学者来说都是肯定的，因为这是材料设计中最棘手的问题，这可能是更简单有效的解决方案。

【参考方案3】：

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

但它的一半还在路上......！没有成功

下面是链接

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

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

问题是

到处都提供了相同的示例，但滚动到包含表格的 div 而不是表格本身

粘性页眉和页脚不能很好地工作..!!

内容在标题上方向上滚动..!!