桌子/卡片填满屏幕的其余部分

时间:2019-05-15 21:57:32

标签: css angular-material angular7

默认显示前10条记录,并且表格下方有几英寸的空白。

如何修改此设置,使卡/桌子占据屏幕的其余部分,并且分页链接位于最底部?

<mat-card>
<mat-card-content>
<table mat-table [dataSource]="dataSource" matSort matSortStart="desc" class="mat-elevation-z6">
  <ng-container matColumnDef="virtualMachineName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      Virtual Machine Name
    </th>
    <td mat-cell *matCellDef="let element">{{ element.virtualMachineName }}</td>
  </ng-container>

  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
    <td mat-cell *matCellDef="let element">{{ element.status }}</td>
  </ng-container>

  <ng-container matColumnDef="labName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Lab Name</th>
    <td mat-cell *matCellDef="let element">{{ element.labName }}</td>
  </ng-container>

  <ng-container matColumnDef="instance">
    <th mat-header-cell *matHeaderCellDef>Instance</th>
    <td mat-cell *matCellDef="let element">{{ element.instance }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

<mat-paginator
  [pageSize]="10"
  [pageSizeOptions]="[10, 25, 50, 100]"
></mat-paginator>
</mat-card-content>
</mat-card>

0 个答案:

没有答案