Применение css реквизита для последнего <tr>внутри <tbody>в угловых - PullRequest
Новая
       12

Применение css реквизита для последнего <tr>внутри <tbody>в угловых

1 голос
/ 30 апреля 2019

У меня есть пара <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>

Я получаю this.data?.activedata от вызова API.

Ответы [ 2 ]

1 голос
/ 30 апреля 2019

@ 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>
1 голос
/ 30 апреля 2019

Попробуйте установить id для своей таблицы, как показано ниже 

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

и ваш CSS должен быть 

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