突出显示表行的一部分

Question

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

我希望一些行也一直被突出显示（不仅仅是onhover）。然而，我发现大多数要突出显示的行都是彼此相邻的，它会产生表格中那部分只是黄色并且看起来不那么好的效果。

我想知道是否可以通过行的中间创建一小段突出显示，而外部保持其自然色。

这就是我所拥有的：

.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;，即可完成您想要的操作。

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

Answer 2

为什么不在突出显示的行中添加边框？

.resultTable tbody tr:nth-child(n):hover{
    background-color: yellow;
    border-top: solid 1px #333;
    border-bottom: solid 1px #333;
}