html - 需要将垫子表格单元格对 Angular 分割并添加值

我需要对角划分Mat Table单元格。并且需要根据值添加值和颜色。像这样...



现在，我将单元格拆分为四个。并添加值和颜色...


这是我的代码.html

<ng-container matColumnDef="RearIdler">
            <mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Rear Idler')}} </mat-header-cell>
            <mat-cell *matCellDef="let row" class="no-padding">
                <div>
                    <span class="component-span top {{getComponentHoursClass(7,1, row.Components)}}">
                        {{getComponentHours(7,1, row.Components)}}
                    </span>
                    <span class="component-span top {{getComponentClass(7,1, row.Components)}}">
                        {{getComponentValue(7,1, row.Components)}}%
                    </span>
                </div>
                <div>
                    <span class="component-span bottom {{getComponentHoursClass(7,2, row.Components)}}">
                        {{getComponentHours(7,2, row.Components)}}
                    </span>
                    <span class="component-span bottom {{getComponentClass(7,2, row.Components)}}">
                        {{getComponentValue(7,2, row.Components)}}%
                    </span>
                </div>
            </mat-cell>
        </ng-container>

.css

.component-span {
    display:block;
    border-radius: 4px;
    text-align: center;
    margin: 1px;
    padding: 4px 2px;
    font-size: 12px;
}

最佳答案

如CSSDesk http://www.cssdesk.com/RERXd所示

CSS / HTML

    div.all {
      margin:20px;
      width:200px;
      height:120px ;
      background-color:#ee0;
      position:relative;
      font-size:40px;
    }
    div.top {
      width: 0;
      height: 0;
      border-top: 120px solid #ffb;
      border-right: 200px solid transparent;
    }
    div.mid {
      position:absolute;
      top:0;
      left:0;
    }
    div.bot {
      position:absolute;
      bottom:0;
      right:0;
    }
    div.mid, div.bot {
      padding:5px;
    }

    <table><tr><td>
    <div class="all">
      <div class="top"></div>
      <div class="mid">-261</div>
      <div class="bot">22.1%</div>
    </div>
    </td></tr></table>

关于html - 需要将垫子表格单元格对 Angular 分割并添加值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53698051/