Unterstützung derselben Spaltengröße bei Reduzierung der Bildschirmgröße in der Winkelmaterialtabelle

Question

Ich habe eine Materialtabelle, in der ich die 9 Spalten verwende. Ich möchte die gleiche Spaltengröße beibehalten, auch wenn sich der Bildschirm verringert.

Derzeit, wenn ich meinen Bildschirm verkleinere, wird die letzte Spalte zuerst ausgeblendet, was etwas seltsam aussieht, da andere Gruppen immer noch die gleiche Größe haben.

Gibt es überhaupt eine Unterstützung für die gleiche Spaltengröße für den "Gesamtabrechnungsbetrag", selbst wenn die Bildschirmgröße reduziert wird?

Unten ist mein Stackblitz

https://stackblitz.com/edit/angular-bklajw-5foa62?file=app%2Ftable-basic-example.ts

Bild aktualisiert

Answer 1

Vielen Dank für die Klärung Ihres Problems auf meine Anfrage. Für dieses Verhalten würde ich empfehlen, dass Sie verwenden min-widhtund max-widhtdass tableIhre Zelle auf jedem Bildschirm ähnlich aussieht. Bitte verwenden Sie unten CSS in Ihrem Stackblitz

th.mat-header-cell,
td.mat-cell {
  text-align: center;
  border: 1px solid #ccc;
  padding: 0 !important;
  min-width: 100px;
  max-width: 100px;
}

Auch wenn Sie die erste Zelle kleiner aussehen lassen möchten, da es sich um Seriennummern handelt, ändern Sie sie min-widthund max-widthverwenden Sie siefirst-child

th.mat-header-cell:first-child,
td.mat-cell:first-child{
  min-width: 50px;
  max-width: 50px;
}

Um nur den " Gesamtabrechnungsbetrag " zu ändern, wie Sie in Ihrer Frage erwähnt haben, verwenden Sie eine KLASSE für diese Zelle ( th td) und formatieren Sie sie wie oben

 .similar-cell-width{
    min-width: 100px;
    max-width: 100px;
    width: 100px; /*solution as per your req it fix the table cell widht*/

 }