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

Question

我需要对 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;
}

Answer 1

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