web-dev-qa-db-fra.com

Remplir une cellule de tableau mat avec une couleur

J'ai une colonne assez basique dans un mat-table Comme suit:

<mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="zone">
        <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
        <mat-cell *matCellDef="let item" [style.background-color]="'#' + item.zone.color"></mat-cell>
    </ng-container>

    ...

</mat-table>

Je voudrais remplir les cellules de la colonne zone avec des couleurs variant d'une ligne à l'autre (pas la ligne entière, uniquement les cellules de cette colonne spécifique).

Tout ce que j'ai pu trouver jusqu'à présent, c'est colorer toute la ligne.

Les cellules de la colonne zone sont rendues au format HTML suivant:

<mat-cell class="mat-cell cdk-column-zone mat-column-zone" role="gridcell" style="background-color: rgb(255, 182, 193);" _ngcontent-c8=""></mat-cell>

Nous pouvons voir que la propriété de style background-color A été correctement appliquée, mais le problème est que la hauteur de la cellule est 0. car la cellule n'a pas de contenu. J'ai essayé de mettre un &nbsp; À l'intérieur de la cellule, mais il s'affiche sous la forme d'une fine barre avec des marges supérieure et inférieure:

enter image description here

Et ce que je veux, c'est colorer la cellule entière, y compris ses marges.

Comment colorer des cellules individuelles dans mat-table?

htmlcssangularangular-material
6
Alexander Abakumov

Si vous regardez le CSS par défaut fourni par Angular Material , vous remarquerez que l'élément mat-row A une hauteur minimale de 48px .

mat-row height

Mais si vous regardez le mat-cell, Vous remarquerez qu'il n'a pas de minimum ni de hauteur par défaut, il s'appuie sur les propriétés d'affichage/d'alignement de l'élément parent (la ligne) pour rester centré.

mat-cell height

Si vous regardez l'image précédente, elle montre exactement la zone colorée par la propriété de couleur d'arrière-plan dans votre code.

Donc, pour changer la couleur d'arrière-plan de la cellule entière, l'une de vos options serait de définir la même hauteur minimale utilisée par les lignes pour les cellules, ce qui pourrait être fait en utilisant la déclaration CSS suivante:

.mat-cell, .mat-header-cell {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
}

Et puis, utilisez simplement la propriété de couleur d'arrière-plan pour changer la couleur.

6
Romulo