如何使垫台和垫分页器在运行时采用相同的宽度

Question

我希望通过使用CSS响应式表格来制作表格，方法是使表格在小屏幕上水平书写，但我无法对分页器执行相同的操作 pa分页器看起来较短，宽度与上面的表格不同 所以我想在运行时访问设置的分页器宽度，使其与表格相同

<div class="wrapper table-responsive mat-elevation-z8">

  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container
      *ngFor="let col of displayedColumns; let i = index"
      matColumnDef="{{ col }}"
    >
      <ng-container *ngIf="i == 0">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
        <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
      </ng-container>
    .....
  </table>

<!-- this below code isnt responsive -->
 <mat-paginator
    [showFirstLastButtons]="true"
    [length]="length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="pageEvent = getServerData($event)"
  ></mat-paginator>
</div>

我的CSS类

table {
  width: 100%;
}

.mat-delete {
  background-color: $warn;
  color: #fff;
}

.mat-table {
  overflow-x: scroll;
}

.mat-cell,
.mat-header-cell {
  word-wrap: initial;
  display: table-cell;
  padding: 0px 10px;
  line-break: unset;
  // width: 100%;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.mat-row,
.mat-header-row {
  display: table-row;
}