用顏色填充墊桌的單元格

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

如果查看Angular Material提供的默認CSS，您會注意到mat-row元素的最小高度為48px 。

但是如果你看一下mat-cell你會注意到它沒有最小的默認高度設置，它依賴於父元素（行）顯示/對齊屬性來保持居中。

如果查看上一個圖像，它會准確顯示代碼中背景顏色屬性所着色的區域。

因此，要更改整個單元格的背景顏色，您可以選擇將行使用的最小高度設置為單元格，這可以使用以下CSS聲明來完成：

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

然后簡單地使用背景顏色屬性來更改顏色。