Я использую 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;
}
}
Как я могу решить эту проблему?