Coloring HTML Table Borders On Hover

Question

I would like to have the top and bottom border of a tr to change colour when I hover over it. The problem that I am having is that the tr above the hovering one is overriding the hover styles (at least that is what I think is happening).

In my example here, the first item is hovering correctly, but in the second and third ones only the bottom border is highlighting:

 table { border-collapse: collapse; } th { background-color: rgb(231, 231, 231); } td { border-bottom: 2px solid rgb(214, 214, 214); border-top: 2px solid rgb(214, 214, 214); } table tr:hover td { border-bottom: 2px solid red; border-top: 2px solid red; } 

 <table> <tr> <th>COMPANY</th> <th>CONTACT</th> <th>COUNTRY</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </table> 

Answer 1

If you want to keep your 2 px borders, you need to get rid of the collapse and then remove the border-padding. You can then use a sibling selector to change the correct borders on hover.

In the below, I have just added a thead and tbody to your table so that we know only the body elements will change when hovered

 table { border-spacing:0; } th { background-color: rgb(231, 231, 231); } td { border-top: 2px solid rgb(214, 214, 214); /* make all cells have a top border */ } tbody tr:last-child td { border-bottom: 2px solid rgb(214, 214, 214); /* make the last row also have a bottom border */ } tbody tr:hover td { border-color: red; /* change all borders to red on hover (mainly because of the last child bottom border */ } tbody tr:hover + tr td { border-top-color: red; /* change any cells without a bottom border - make the next row have top border go red (so it looks like current row bottom border) */ } 

 <table> <thead> <tr> <th>COMPANY</th> <th>CONTACT</th> <th>COUNTRY</th> </tr> </thead> <tbody> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </tbody> </table> 

Answer 2

This is the closest I can get when not using collapse which is what your issue was

• border-spacing:0;
• border-top/bottom: 1px instead of 2px

 table { border-spacing:0; } th { background-color: rgb(231, 231, 231); } td { border-bottom: 1px solid rgb(214, 214, 214); border-top: 1px solid rgb(214, 214, 214); } table tr:hover td { border-bottom: 1px solid red; border-top: 1px solid red; } 

 <table> <tr> <th>COMPANY</th> <th>CONTACT</th> <th>COUNTRY</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </table> 

Answer 3

Just remove border-collapse: collapse; and add border-spacing:0

Answer 4

another option "could" be to use :before or :after !

One of the main benefits is that it is not going to change the size of the box like border does.

Here is an example of it:

table tr {
    position: relative;
}

table tr:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: red;
}

The "content" attribute is mandatory to be able to generate the element but the string can be empty (especially when you want to use this element as a graphic hack).

EDIT — I forgot to precise you the hover state:

table tr:hover:before {
    background: blue;
}

NOTE — :before is automatically placed right before the content of the parent while :after is placed right after (before the parent's tag is closed).