Angular 角材料垫分页器固定底部

下午好

我有麻烦有一个固定的分页器与角材料使用数据表。我的意思是我只想滚动行。 我已经检查过了，但没有成功。这是我的密码：

component.html

    <mat-form-field class="table-form-input">
    <input type="text" matInput (keyup)="doFilter($event.target.value)" placeholder="Filter" >
  </mat-form-field>
<div class="table-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

    <!-- 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>

    <!-- Client id Column -->
    <ng-container matColumnDef="cli_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Client ID </th>
      <td mat-cell *matCellDef="let element"> {{element.cli_id}} </td>
    </ng-container>

     <!-- EXT id Column -->
     <ng-container matColumnDef="ext_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> EXT ID </th>
      <td mat-cell *matCellDef="let element"> {{element.ext_id}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="want_details">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Need details </th>
      <td mat-cell *matCellDef="let element" (click) = "rowClicked(element.ext_id)">
        <mat-radio-group>
          <mat-radio-button class="table-radio-button" *ngFor="let detail of detail_types" [value]="detail.id" [checked]= "detail.id === element.want_details">
            {{detail.name}}
          </mat-radio-button>
        </mat-radio-group> </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSize]="25"[pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>

component.css

table {
    width: 100%;
  }

  th.mat-sort-header-sorted {
    color: black;
  }

  .table-container {
    margin: auto;
    width: 80%;
    max-height: 80%;
    overflow: auto;
  }

  .table-form-input{
    width: 80%;
    margin-left: 10%;
    margin-top: 20px;
  }

  .table-radio-button{
    padding-right: 5px;
    padding-left: 5px;
  }

我试着把溢出物放在桌子上，但没用。尝试相对、绝对、固定等等

如果有人有一个解决方案或文档，这将是完美的

---

非常感谢

使用静态高度和非相对高度解决了问题：

.table-container {
margin: auto;
width: 80%;
height: 400px; // change
overflow: auto;

---

}

使用静态高度和非相对高度解决问题：

.table-container {
margin: auto;
width: 80%;
height: 400px; // change
overflow: auto;

---

}

如果要将mat分页器固定在页面底部（而不是窗口底部），向下滚动时，可以使用此方法

.html

---

如果要将mat分页器固定在页面底部（而不是窗口底部，向下滚动时，可以使用此方法）

.html

根据材料8.1

我们可以使用max-height或height-CSS属性将表包装在一个div中，并将paninator放在该div之外

Html代码示例

  <div class="mat-elevation-z2">
    <div class="table-container">

      <!--- List of column definitions here --->

      <table mat-table [dataSource]="dataSource" matSort>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    <mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 15, 25, 100]"></mat-paginator>
  </div>

根据材料8.1

我们可以使用max-height或height-CSS属性将表包装在一个div中，并将paninator放在该div之外

Html代码示例

  <div class="mat-elevation-z2">
    <div class="table-container">

      <!--- List of column definitions here --->

      <table mat-table [dataSource]="dataSource" matSort>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    <mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 15, 25, 100]"></mat-paginator>
  </div>

原因在于：

 .table-container {
    max-height: calc(100vh - 155px); // or height:calc(100vh - 155px); depending on your need  change
    overflow: auto; 
 }

Scroll设置为表的容器，这就是它也应用于分页器的原因。请尝试将其放置在容器外部，如下所示：

<div class="table-container">
   *your table...*
</div>

<mat-paginator></mat-paginator>

*你的桌子*

原因如下：

 .table-container {
    max-height: calc(100vh - 155px); // or height:calc(100vh - 155px); depending on your need  change
    overflow: auto; 
 }

Scroll设置为表的容器，这就是它也应用于分页器的原因。请尝试将其放置在容器外部，如下所示：

<div class="table-container">
   *your table...*
</div>

<mat-paginator></mat-paginator>

*你的桌子*

您找到问题的解决方案了吗？您好，是的！通过使用静态高度和非相对性解决了您可以使用flexbox代替静态高度您找到问题的解决方案了吗？您好，是的！通过使用静态高度和非相对性解决了您可以使用flexbox代替静态高度