comment prendre en charge la même taille de colonne lors de la réduction de la taille de l'écran dans la table de matériau angulaire

Question

J'ai une table de matériaux où j'utilise les 9 colonnes, je voudrais conserver la même taille de colonne même si l'écran se réduit.

Actuellement, lorsque je réduis mon écran, la dernière colonne se dérobe en premier, ce qui semble un peu étrange car les autres groupes ont toujours la même taille.

Y a-t-il de toute façon que nous pouvons prendre en charge la même taille de colonne pour le «montant total du règlement», même la taille de l'écran réduit?

Ci-dessous est mon stackblitz

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

Image mise à jour

Answer 1

Merci d'avoir clarifié votre problème sur ma demande. pour ce comportement, je vous suggère d'utiliser min-widhtet max-widhtde rendre votre tablecellule similaire sur tous les écrans, veuillez utiliser le CSS ci-dessous dans votre stackblitz

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

Aussi, si vous voulez que la première cellule paraisse plus petite car il s'agit de numéros de série, changez-la min-widthet max-widthutilisezfirst-child

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

Pour ne modifier que le " montant total du règlement " comme vous l'avez mentionné dans votre question, utilisez une CLASSE sur ces cellules ( th td) et le style comme ci-dessus

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

 }