Как помешать мат-таблице изменять размеры столбцов?

Question

Я играю с мат-таблицей и ее пагинатором из angular материала io. В настоящее время я пытаюсь клонировать дизайн из другого проекта от рабочего партнера. Однако, как вы, наверное, видите на фотографиях, у меня 18 рядов и 5 показаны максимально. Когда я нажимаю на кнопку, чтобы увидеть следующие 5 строк, столбцы «Stammnummer» и «Bereich» сместятся на несколько сантиметров вправо, а если я нажму еще раз, они немного сместятся влево. Я надеюсь, что вы можете видеть это на фотографиях.

Возможно, он движется, потому что строки в Standort иногда длиннее или короче. Но я знаю, что есть способ остановить другие столбцы, которые будут затронуты этим. Я просто не знаю как.

Вот мой код:

table-paginator-component.ts:

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';


@Component({
  // tslint:disable-next-line: component-selector
  selector: 'table-paginator',
  styleUrls: ['table-paginator.component.css'],
  templateUrl: 'table-paginator.component.html',
})
export class TablePaginatorComponent implements OnInit {
  displayedColumns: string[] = ['standort', 'stammnummer', 'bereich'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
  }
}

export interface PeriodicElement {
  standort: string;
  stammnummer: string;
  bereich: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {standort: 'Düsseldorf', stammnummer: '0271-8678', bereich: '000-999'},
  {standort: 'Köln FD', stammnummer: '0271-2909', bereich: '000-499'},
  {standort: 'Köln BD', stammnummer: '0271-846233', bereich: '00-99'},
  {standort: 'Dortmund', stammnummer: '0271-9234', bereich: '000-599'},
  {standort: 'Münster', stammnummer: '0257-543', bereich: '000-799'},
  {standort: 'Leipzig', stammnummer: '079-88544', bereich: '000-999'},
  {standort: 'Dresden', stammnummer: '0371-9888', bereich: '000-499'},
  {standort: 'Hamburg', stammnummer: '0371-8788', bereich: '000-499'},
  {standort: 'Hannover', stammnummer: '070-32888', bereich: '000-999'},
  {standort: 'Mannheim', stammnummer: '0571-3388', bereich: '000-499'},
  {standort: 'Frankfurt', stammnummer: '0671-4077', bereich: '000-499'},
  {standort: 'Stuttgart FD', stammnummer: '079-2773', bereich: '000-499'},
  {standort: 'Stuttgart SB', stammnummer: '0771-2777', bereich: '000-499'},
  {standort: 'München', stammnummer: '0771-95456', bereich: '00-99'},
  {standort: 'Nürnberg GD', stammnummer: '079-23874', bereich: '000-999'},
  {standort: 'Nürnberg FD', stammnummer: '0911-836', bereich: '0000-9999'},
  {standort: 'Würzburg', stammnummer: '0911-9251', bereich: '000-499'},
  {standort: 'Berlin', stammnummer: '0951-3511', bereich: '000-999'}
];

table-paginator-component. html:

<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef="standort">
    <th mat-header-cell *matHeaderCellDef> Standort </th>
    <td mat-cell *matCellDef="let element"> {{element.standort}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="stammnummer">
    <th mat-header-cell *matHeaderCellDef> Stammnummer </th>
    <td mat-cell *matCellDef="let element"> {{element.stammnummer}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="bereich">
    <th mat-header-cell *matHeaderCellDef> Bereich </th>
    <td mat-cell *matCellDef="let element"> {{element.bereich}} </td>
  </ng-container>

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

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Answer 1

При таком решении столбцы не изменяются, но также имеют одинаковый размер:

table {
  width: 100%;
  table-layout: fixed;
}
th, td {
  overflow: hidden;
  width: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Answer 2

Вы можете указать ширину в каждом столбце из css следующим образом.

/* mat-column-"COLUMN-NAME" */
mat-column-standort {
  width: 80%;
}