1

I am facing one problem with table row border styles.

Suppose, I have 2 rows in a table.

1st row has border-bottom: 0.2rem solid #F1F2F2.

2nd row I want to highlight with border: 1px solid red based on some condition to highlight the row using [ngClass] property.

Actual Result is 2nd is highlighted with 3 sides (left, right and bottom) but not top as 1st row's border-bottom making it to hide.

Expected: Should highlight all sides of the row.

Please look below image for the problem I'm facing

CSS:

.table__row {
    border-bottom: 0.2rem solid #F1F2F2;
}
.tr-outline {
   boder: 1px solid red;
}

HTML:

<tbody class="table__body"> <tr class="table__row" *ngFor="let item of entries" [ngClass]="{'tr-outline': highlightRow(item.isHighlight)}"> <td class="td-name">{{ item.name}}</td> <td class="td-cif">{{item.id}}</td> <td class="td-icon">{{item.excercise}}</td> </tr> </tbody>

Table row style

Bharadwaj
  • 45
  • 9

1 Answers1

0

Try to set your border to td elements because your table element have set border-collapse: collapse property

table-border-color-in-css-with-border-collapse

pioro90
  • 684
  • 6
  • 14