将css prop应用到最后 inside the in angular

Question

我在<tr>里面有几个<tbody>。我想将某些风格应用到<tbody>的最后一排。

我尝试将这些样式添加到我的角度组件样式。还是行不通。

.table-borderless td, .table-borderless th 
{ 
border-top: 0px !important;
 }

 tbody,thead{
    border-top:none !important;
 }

tbody tr:last-child{
    border-bottom:1px solid red;
}

<table class="table table-borderless" id="testTable">
<tbody *ngFor="let sa of this.data?.activedata">

        <tr *ngIf="sa.type==='run'">
          <th scope="row">Fasting</th>
          <td>{{sa.data[0]?.value}} {{sa.data[0]?.unit}}</td>
          <td>{{sa.data[1]?.value}} {{sa.data[1]?.unit}}</td>
          <td>{{sa.data[2]?.value}} {{sa.data[2]?.unit}}</td>
        </tr>
        <tr *ngIf="sa.type==='eat'">
          <th scope="row">Post Meal</th>
          <td>{{sa.data[0]?.value}} {{sa.data[0]?.unit}}</td>
          <td>{{sa.data[1]?.value}} {{sa.data[1]?.unit}}</td>
          <td>{{sa.data[2]?.value}} {{sa.data[2]?.unit}}</td>
        </tr>
        <tr *ngIf="sa.type==='dance'">
          <th scope="row">Pre Meal</th>
          <td>{{sa.data[0]?.value}} {{sa.data[0]?.unit}}</td>
          <td>{{sa.data[1]?.value}} {{sa.data[1]?.unit}}</td>
          <td>{{sa.data[2]?.value}} {{sa.data[2]?.unit}}</td>
        </tr>

      </tbody>
</table>

我从API调用中获取this.data?.activedata。

Answer 1

尝试为您的表设置id，如下所示

<table id="testTable">.....</table>

你的CSS应该是

#testTable > tbody > tr:last-child{
    border-bottom:1px solid red;
}

Answer 2

@Buczkowski我做到了。但是，它不起作用。

也许你有一些额外的风格？有了这个简单的例子，它似乎有效：

table {
border-collapse: collapse;
}

table > tbody > tr:last-child {
border-bottom: 1px solid red;
}

<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>