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

Question

我面临一个表格行边框样式的问题。

假设，我在一个表中有 2 行。

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

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

实际结果是 2nd 以 3 个边（左侧、右侧和底部）突出显示，但不是顶部，因为第一行的边框底部使其隐藏。

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

请看下图了解我面临的问题

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 元素，因为您的表格元素已设置边框折叠：折叠属性

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