首页 文章

需要对角分割mat表格单元格并添加值

提问于
浏览 次
0

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

现在我将细胞分成四个 . 并添加值和colurs ...

这是我的代码.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;
}
html css angular angular5 mat-table

2 回答

  • 0

    试试这个：

    body {
        background-color: burlywood
    }

    .main {
        margin: 50px;
        overflow: hidden;
        position: relative;
        width: 100px;
        height: 50px;
        background-color: aqua;
    }

    .text {
        height: 25px;
    }

    .percentage {
        background-color: transparent;
        text-align: right;
        height: 25px;
        position: relative;
    }

    .percentage>div {
        position: relative;
        z-index: 1;
    }

    .percentage:before {
        content: "";
        background-color: white;
        position: absolute;
        height: 60px;
        width: 120px;
        top: 0;
        left: 0;
        transform: rotate(-27deg);
        z-index: 0;
    }

    <div class="main">
    <div class="text">203</div>
    <div class="percentage">
        <div>
            95%
        </div>
    </div>
</div>

    您需要调整这些CSS属性以匹配您的代码：

    在 .main

    • width 和 height
      249 width ， height 和 transform in .percentage:before

    希望这有帮助

    回复于
  • 0

    如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>
    回复于

相关问题