1

I have a couple of <tr> inside the <tbody>. I wanna apply certain styles to last row of the <tbody>.

I tried adding these styles to my angular component style. Still not working.

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

I am getting the this.data?.activedata from the API call.

aadhira
  • 321
  • 1
  • 3
  • 16

2 Answers2

1

Try to set id for your table like below

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

and your CSS should be 

#testTable > tbody > tr:last-child{
    border-bottom:1px solid red;
}
Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
  • I tried this method before. But, It didn't work. Instead of applying to the last-row, it's applying the style to all the rows inside the ``. – aadhira Apr 30 '19 at 10:05
1

@Buczkowski I did that. But, it's not working.

Maybe you have some additional styles? With that plain example it seems to work:

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>
Buczkowski
  • 2,296
  • 12
  • 18
  • Yeah. You're right. I am have updated my css styles. I am using bootstrap 3 table in the angular which has the default property of showing the borders for every `tr`. But, I need to disable it and show it for the last-row alone which is inside the `tbody`. – aadhira Apr 30 '19 at 10:41