如何在Angular Material中的垫子分页和垫子表之间删除空间？

Question

我有一个带有Material Design的Angular应用程序，其中我使用的是Angular Material lib中的分页组件。 无需应用其他样式。

在屏幕上，您可以看到表格和分页之间存在间隙。我该如何摆脱呢？例如，当我选择5个用户时，差距消失了。

我使用了style =“ margin-top：-1px”，但也许有更好的方法吗？

也许可以在其中包含mat-paginator 垫子表？

HTML

<mat-table [dataSource]="data" [class.mat-elevation-z2]="true" style="overflow: hidden;">

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Nombres</mat-header-cell>
    <mat-cell *matCellDef="let element">
        <a (click)="redirectToUser(element.userId)">
            {{element.names}}
        </a>
    </mat-cell> 
  </ng-container>

  <ng-container matColumnDef="rol">
    <mat-header-cell *matHeaderCellDef>Rol</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.rolDTO.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef>Nombre del usuario</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.username}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef class="cent">Estado</mat-header-cell>
      <mat-cell *matCellDef="let element" class="cent">
        <mat-icon *ngIf="element?.rolDTO?.status === 'A'" style="color: rgb(44, 136, 79)">check_circle_outline</mat-icon>
        <mat-icon *ngIf="element?.rolDTO?.status === 'I'" style="color: rgb(168, 25, 25)">highlight_off</mat-icon>
      </mat-cell>
  </ng-container>

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


</mat-table>
<mat-paginator
style="overflow: hidden;"
[class.mat-elevation-z2]="true"
[showFirstLastButtons]="true"
(page)=               "paginate($event)"
[length]=             "pageConf.totalItems"
[pageSizeOptions]=    "pageConf.pageSize"
[pageSize]=           "pageConf.elementsPerPage"
</mat-paginator>