css - 突出显示表格行的一部分

Question

我有一个表格，其中包含交替颜色的行，当我将鼠标悬停在行上时，它们会突出显示为黄色。

我也希望某些行始终突出显示(不仅仅是悬停时)。然而，我发现大多数要突出显示的行都紧挨着彼此，并且它给出的效果是表格的那部分只是黄色并且看起来不太好。

我想知道是否可以在行的中间创建一条小条高光，同时外部保持其自然颜色。

这是我的:

.resultTable tbody tr:nth-child(2n+1){
    background-color:white;
}
.resultTable tbody tr:nth-child(2n){
    background-color:#E6EBEC;
}

.resultTable tbody tr:nth-child(n):hover{
    background-color: yellow;
}

.highlightedRow{
    background-color:#F2F18D !important;
}

这就是我想要的:

更新:

我似乎无法让边界方法工作。

这是我得到的最接近的，但边界之间有空间。

.resultTable{
    text-align:center;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.resultTable thead{
    background-color: #000099;
    color: white;
    font-size:22px;
    font-weight:bold;
}
.resultTable caption{
    background-color: #000099;
    color: white;
    font-size:22px;
    font-weight:bold;
}

.resultTable tbody tr:nth-child(2n+1){
    background-color:white;
    border-top:2px solid green;
    border-bottom:2px solid green;
}
.resultTable tbody tr:nth-child(2n){
    background-color:#E6EBEC;
    border-top:2px solid red;
    border-bottom:2px solid red;
}
.resultTable td{
    border:inherit;
}
.resultTable tbody tr:nth-child(n):hover{
    background-color: yellow  !important;
}

.highlightedRow{
    background-color:#F2F18D !important;
}

给我:

顺便说一下:我特意把它们设为红色和绿色，以便于发现问题。

Answer 1

设置 border-width: 3px; 或其他设置，然后设置 border-color: #FFF; 这将执行您想要的操作。

换句话说，您不能将行的一部分设置为颜色，除非您使用图像作为背景。但您可以为边框着色。