CODEWITHSUNDEEP
htmlcss
some-non-descript-user
some-non-descript-user

Reputation: 616

Top and bottom borders in table row: only bottom border is styled

I'm using the following CSS to achieve a highlighting effect on the table row currently hovered: 

#container table {
    border-collapse: collapse;
}
#container table td {
    border: 2px solid white;
}
#container table tr:hover td {
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}

On all but the top-most tbody row only the bottom border is styled with #999. The top row correctly shows two borders. It looks like the white bottom-border of the previous row covers the grey top-border of the hovered one (tested in FF 42). Is there a way to get this right?

JSFiddle

Upvotes: 3

Views: 20361

Answers (3)

Lidaranis
Lidaranis

Reputation: 785

How about this?

https://jsfiddle.net/4g2w420o/6/

<div id="container">
<table>
    <tr><td>ABC</td><td>DEF</td></tr>
    <tr><td>ABC</td><td>DEF</td></tr>
    <tr><td>ABC</td><td>DEF</td></tr>
</table>
</div>

#container table {
    border-spacing: 0px;
    border-collapse: separate;
}
#container table tr td {
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}
#container table tr:hover td {
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}

Upvotes: 1

Gabriel Augusto
Gabriel Augusto

Reputation: 436

Try this: 

#container table {
    border-collapse: collapse;
}
#container table td {
    border-top: 2px solid #FFF;   
}
#container table tr:hover td {
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}

DEMO: https://jsfiddle.net/4g2w420o/5/

Upvotes: 3

TheTechGuy
TheTechGuy

Reputation: 17354

Try this, does it work correctly JSFIDDLE

#container table {
    border-collapse: collapse;
}
#container table td {
    /*border: 2px solid white; I have commented this */
}
#container table tr:hover td {
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}

Upvotes: 1

Related Questions