Angular Выровнять столбец таблицы материалов - PullRequest
0 голосов
/ 17 июня 2020

Я использую Angular Таблицы материалов для своего проекта. Я использовал 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;
}
  }

Как я могу решить эту проблему? enter image description here

1 Ответ

1 голос
/ 17 июня 2020

Возможно, вы можете попробовать с первым примером таблицы материалов (с использованием гибкого дисплея) 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...