我想用颜色填充材料表中单元格的背景。单元格应该以代表单元格值的方式填充。最后看起来有点像条形图。
我从这里得到了一个好的开始：Set div background color based on a percent (like progress bar)
问题是这不能填充单元格。它的高度和字体一样高。下图显示了它当前的情况。当前我使用的是静态宽度，但稍后我会将其更改为单元格的值。
条形图从中间开始，因为其他一些列可能为负。

有没有办法让div高度适合父单元格，或者不使用div直接对单元格应用相同的行为？
我更喜欢最后一个，但我甚至不知道这是否可能。
我从“Angular 材质”示例中获取了当前表。
超文本：

<ng-container *transloco="let t; read: 'dashboard'">
  <div class="card-container">
    // other cards

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element">
          <div class="progressbar-wrapper">
            {{element[column]}}
            <div class="progressbar" style="width: 28%"></div>
            <div class="progressbar2" style="width: 28%"></div>
          </div></td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</ng-container>

CSS：

.card-container {
    width: 85vw;
    height: 90vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
}

.overview-card {
    width: 40%;
    height: fit-content;
    // height: 46%;
}

.overview-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.overview-item {
    margin: 10px;
    margin-top: 0px;
}

.make-gold {
  background-color: gold
}

.progressbar-wrapper {
    position: relative;
    z-index: 1;
}

.progressbar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    background-color: #dcf3dd;
    z-index: -1;
}
.progressbar2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22%;
    background-color: #1ccb25;
    z-index: -1;
}

.table-card {
    width: 44%;
    height: 46%;
}

.value-card {
    width: 20%;
    height: 20%;
}

typescript ：

import { Component, OnInit } from "@angular/core";
import { MatTableDataSource } from "@angular/material/table";

@Component({
  selector: "app-dashboard-page",
  templateUrl: "./dashboard-page.component.html",
  styleUrls: ["./dashboard-page.component.scss"],
})
export class DashboardPageComponent implements OnInit {
  displayedColumns: string[] = ["name", "status", "windDirection", "windSpeed", "power"];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  constructor() {}

  ngOnInit(): void {}

}

export interface PeriodicElement {
  name: string;
  status: string;
  windDirection: number;
  windSpeed: number;
  power: number;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {
    name: "Hydrogen",
    status: "ok",
    windDirection: 180.0,
    windSpeed: 8.2,
    power: 900,
  },
  {
    name: "Helium",
    status: "ok",
    windDirection: 180.0,
    windSpeed: 8.2,
    power: 900,
  },
  {
    name: "Lithium",
    status: "ok",
    windDirection: 180.0,
    windSpeed: 8.2,
    power: 900,
  },
  {
    name: "Beryllium",
    status: "ok",
    windDirection: 180.0,
    windSpeed: 8.2,
    power: 900,
  },
  {
    name: "Boron",
    status: "ok",
    windDirection: 180.0,
    windSpeed: 8.2,
    power: 900,
  },
  {
    name: "Carbon",
    status: "ok",
    windDirection: 180.0,
    windSpeed: 8.2,
    power: 900,
  },
  {
    name: "Nitrogen",
    status: "ok",
    windDirection: 180.0,
    windSpeed: 8.2,
    power: 900,
  },
  {
    name: "Oxygen",
    status: "ok",
    windDirection: 180.0,
    windSpeed: 8.2,
    power: 900,
  },
  {
    name: "Fluorine",
    status: "ok",
    windDirection: 180.0,
    power: 900,
  },
  {
    name: "Neon",
    status: "ok",
    windDirection: 180.0,
    windSpeed: 8.2,
    power: 900,
  },
];