Question

我正在为项目使用Angular Material Tables。每当表中的内容不再显示时，我都使用了一些CSS来使“表”水平滚动。但是现在发生的是，当以全屏模式查看时（整个表可见），第一表列的宽度现在非常不同。

表格：

<div class="example-container mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
        <ng-container matColumnDef="Investor">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Firm </th>
          <td mat-cell *matCellDef="let element"> {{element.investor}} </td>
        </ng-container>

        <ng-container matColumnDef="Location">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Firm Eaum ($m) </th>
          <td mat-cell *matCellDef="let element"> {{element.location}} </td>
        </ng-container>

        <ng-container matColumnDef="Date">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Shareholding in BAWAG </th>
          <td mat-cell *matCellDef="let element"> {{element.date}} </td>
        </ng-container>

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


        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    <mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>

CSS：

  .mat-row:hover {
    background-color: rgb(228, 228, 228);
  }

  .example-container {
    display: block;
    width: 100%;
    overflow-x: auto;

  .mat-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    display: table;
    border-collapse: collapse;
    margin: 0px;
}

.mat-row,
.mat-header-row {
    display: table-row;
}

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

我该如何克服这个问题？

Answer 1

也许您可以尝试使用材料表的第一个示例（使用display flex）https://material.angular.io/components/table/examples。这样，您所有的单元格都将具有相同的宽度。

<mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <ng-container matColumnDef="Investor">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Firm </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.investor}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Location">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Firm Eaum ($m) </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.location}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Date">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Shareholding in BAWAG </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.date}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Comment">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Contact Name </mat-header-cellh>
    <mat-cell *matCellDef="let element"> {{element.comment}} </mat-cell>
  </ng-container>

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

角材料表列对齐

1 个答案: