用颜色填充垫桌的单元格

Question

我有一个相当基本的列mat-table如下:

<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>

我想zone用一些不同行的颜色填充列单元格(不是整行,只有这个特定列的单元格).

到目前为止,我所能找到的只是为整行着色.

zone列的单元格呈现为以下HTML:

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

我们可以看到background-color样式属性已被正确应用,但问题是单元格的高度为0.因为单元格没有任何内容.我试图将一个 内部放在单元格中,但它显示为一个带有顶部和底部边距的细条:

我想要的是为整个细胞着色,包括其边缘.

我们如何为单个细胞着色mat-table？

Answer 1

如果查看提供的默认CSS Angular Material,您会注意到该mat-row元素的最小高度为48px.

但是如果你看一下,mat-cell你会注意到它没有最小值既没有设置默认高度,也依赖于父元素(行)显示/对齐属性来保持居中.

如果查看上一个图像,它会准确显示代码中背景颜色属性所着色的区域.

因此,要更改整个单元格的背景颜色,您可以选择将行使用的最小高度设置为单元格,这可以使用以下CSS声明来完成:

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

然后简单地使用背景颜色属性来更改颜色.