How to stop mat-table from resizing its columns?

Question

I am playing around with mat-table and its paginator from angular material io. I am currently trying to clone the design from a different project from a work mate. However, as you hopefully can see in the pictures, I have 18 rows and 5 are shown maximum. When I click on the button to see the next 5 rows, the columns "Stammnummer" and "Bereich" will move some centimeters to the right and if I click again, they will move a little bit to the left. I hope you can see that in the pictures.

It probably moves because the strings in "Standort" are sometimes longer or shorter. But I know there is a way to stop the other columns to be affected by that. I just don't know how.

Thats my code:

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

With this solution the columns don't change but they also have all the same size:

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

Answer 2

you can specify the width in each column from the css like this.

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