Issue with Border Hover on Table <tr>

user_1677409 0
Viewed 86

I am having trouble figuring out what I'm doing wrong... I'm trying to do something that should be simple--change the border color of an entire row when the user hovers over the row.

For the table, I'm using the following CSS code:

    .sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
    .sch tr{ border: 2px solid #000000; }
    .sch tr:hover{ border-color: red; }
    <table class='sch'>
    <tr><td>Test</td><td>Test</td></tr>
    <tr><td>Test</td><td>Test</td></tr>
    <tr><td>Test</td><td>Test</td></tr>
    </table>

The issue is that, when you hover over the second or third row, the top bar of the border remains black, while the sides and bottom change to red. Only the top row changes to red all the way around.

I suspect that this has to do with the bottom of the previous row somehow covering up the red of the hover, but I've tried about everything--except the right answer---to fix it.

Thanks for your help!

css html
3 Answers

border-collapse: collapse; is a culprit here.

It is related to the fact that the top cell bottom border is on top of the bottom cell top border. If you make top cell bottom border as none then you will see all borders properly being set to red.

Look at this interactive example in MDN to see exactly what happens https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

user_8125190

This appears to be tricky to implement without JavaScript. This is a solution using jQuery:

$(".sch tr").hover(function(){
    $(this).css("border-color", "red");
    $(this).prev().css("border-bottom-width", "0");
    }, function(){
    $(this).css("border-color", "#000000");
    $(this).prev().css("border-bottom-width", "2px");
});
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='sch'>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
</table>

user_4654950

If you want to use CSS and HTML only, you can use such not the best but working solution.

CSS-file:

.sch {
    width:97%;
    margin: 0 auto;
    margin-top:30px;
    border-collapse: collapse;
}
tr {
    border: 2px solid #000000;
}
.sch tr:hover {
    border-color: red;
    border-bottom-width: 2px;
}
tr:nth-child(3) {
    border-bottom-width: 0;
}
tr:nth-last-child(1) {
    border-bottom-width: 2px;
}

HTML-file:

<table class='sch'>
    <tr>
        <td>Test</td><td>Test</td>
    </tr>
    <tr>
        <td>Test</td><td>Test</td>
    </tr>
    <tr>
        <td>Test</td><td>Test</td>
    </tr>
</table>
user_56450270
Related