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>

将css prop应用于最后一个in角

2 个答案: