web-dev-qa-db-fra.com

Comment changer Angular Hauteur de ligne de la table des matériaux?

Dans mon Angular (stylisée avec Angular Material), je dois afficher certaines données à l'aide d'une table Material).

Ce tableau a un en-tête collant, plusieurs lignes et un pied de page collant.

Par défaut, les lignes ont une hauteur de 62,5 pixels et j'aimerais remplacer cette valeur.

Comment puis-je y parvenir?

J'ai essayé de remplacer le style css pour tr/tr.mat-row/tr.mat-header-row etc., sans succès. J'ai aussi essayé d'utiliser :: ng-deep.

De plus, ma ligne de pied de page collante a une hauteur de 48 pixels, ce que je n'ai pas défini !! Est-ce que quelqu'un sait ce qui se passe?

Image du tablea

Je suis en mesure d'éditer le CSS de la ligne de pied de page avec :: ng-deep, j'ai mis la police-weight à bold , mais quand je mets le attribut hauteur rien ne se passe.

::ng-deep tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
}
cssangularangular-material
3
Facundo Palavecino

Essayez de l'ajouter sur votre styles.scss.

tr.mat-footer-row {
        border: 1px solid #e7e7e7;
        font-weight: bold;
        height: #px !important;
}
3
Bryyy

Pour modifier la hauteur par défaut (48 px) dans mat-table, vous devez spécifier une classe pour chaque ligne du html, par exemple, lorsque vous définissez les lignes:

<tr mat-row *matRowDef="let row; columns: displayedCol;" class="table-row"></tr>

Ensuite, vous pouvez remplacer la hauteur en définissant dans votre fichier css principal la classe 'table-row' avec une hauteur spécifique, par exemple:

.table-row {
  height: 30px !important;
}

Nous le prouvons avec angular 7 and angular material version 7.3.7.

Cordialement

4
Julian Salamanca

Cela fonctionne correctement.

tr.mat-footer-row,
tr.mat-row {
  border: 1px solid #e7e7e7;
  font-weight: bold;
  height: 20px !important;
}
0
Acodewizard

Avec matière 5

 mat-row.mat-row.ng-star-inserted 
  { height: 32px !important; } 

.mat-row{ min-height: 30px; }
0
Laxmichand Dhuvare

Sur un point connexe, j'ai eu un problème où mes lignes de table de tapis étaient trop hautes et j'ai essayé de définir la hauteur en CSS pour la réduire.

Il s'est avéré que le problème était que "min-height" avait été réglé sur "mat-header-row" et "mat-row" quelque part profondément à l'intérieur du matériau (pas dans mon code source).

La solution était simplement:

.mat-header-row, .mat-row {
  min-height: 30px;
}
0
Dave C

Vous pouvez spécifier la hauteur du pied de page du tableau dans tr.mat-footer-row.

tr.mat-footer-row {
    height: 100px;
}

Voici un exemple StackBlitz https://stackblitz.com/angular/gjjjdpjqvvde?file=app%2Ftable-sticky-footer-example.css

0
Amrish Ashok