Highlight part of a table row

I have a table which has rows that alternate colors, when I hover over rows they are highlighted yellow.

I would like some of the rows to be highlighted all the time too(not just onhover). I have discovered however that most of the rows that are to be highlighted are right next to each other and it gives the effect that that part of the table is just yellow and开发者_如何学运维 it doesn't look that good.

I want to know if it is possible to create a small strip of highlighting through the middle of the row while the outsides remain their natural color.

This is what I have:

.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;
}

This is what I want:

UPDATE:

I cant seem to get the border method to work.

This is the closest I get but there is space between the borders.

.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;
}

Gives me:

By the way: i made them red and green on purpose to easily spot the problem.

Set the border-width: 3px; or something and then set border-color: #FFF; that will do what you want.

In other words, you can't set part of a row to a color, unless you use an image for the background. But you can color the borders.

Why not add a border to your highlighted row ?

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