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

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

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

введите описание изображения здесь

введите описание изображения здесь

Вот мой код:

столовый 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: 񟑿-8678', bereich: 願-999'},
  {standort: 'Köln FD', stammnummer: 񟑿-2909', bereich: 願-499'},
  {standort: 'Köln BD', stammnummer: 񟑿-846233', bereich: ༼-99'},
  {standort: 'Dortmund', stammnummer: 񟑿-9234', bereich: 願-599'},
  {standort: 'Münster', stammnummer: 񟑱-543', bereich: 願-799'},
  {standort: 'Leipzig', stammnummer: 颧-88544', bereich: 願-999'},
  {standort: 'Dresden', stammnummer: 񟓣-9888', bereich: 願-499'},
  {standort: 'Hamburg', stammnummer: 񟓣-8788', bereich: 願-499'},
  {standort: 'Hannover', stammnummer: 颞-32888', bereich: 願-999'},
  {standort: 'Mannheim', stammnummer: 񟖫-3388', bereich: 願-499'},
  {standort: 'Frankfurt', stammnummer: 񟘏-4077', bereich: 願-499'},
  {standort: 'Stuttgart FD', stammnummer: 颧-2773', bereich: 願-499'},
  {standort: 'Stuttgart SB', stammnummer: 񟙳-2777', bereich: 願-499'},
  {standort: 'München', stammnummer: 񟙳-95456', bereich: ༼-99'},
  {standort: 'Nürnberg GD', stammnummer: 颧-23874', bereich: 願-999'},
  {standort: 'Nürnberg FD', stammnummer: 񟛿-836', bereich: 񟍰-9999'},
  {standort: 'Würzburg', stammnummer: 񟛿-9251', bereich: 願-499'},
  {standort: 'Berlin', stammnummer: 񟜧-3511', bereich: 願-999'}
];

Стол-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>

Всего 2 ответа


Вы можете указать ширину в каждом столбце из CSS, как это.

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

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

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

Есть идеи?

10000