顶行的边框底部隐藏了第2行的border属性

Question

我遇到了表行边框样式的一个问题。

假设我在表格中有2行。

第一行有border-bottom: 0.2rem solid #F1F2F2。

第二行我想根据某些条件使用border: 1px solid red突出显示，以使用[ngClass]属性突出显示该行。

实际结果是第2个，以3个边（左，右和下）突出显示，但不是顶部作为第1行的边框 - 底部使其隐藏。

预期：应突出显示该行的所有方面。

请查看我面临的问题

的图片

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

Answer 1

尝试将边框设置为td元素，因为您的表格元素已设置border-collapse：collapse属性

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