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

Question

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

Can you please provide a JSFiddle with a sample table included ? — Ahs N
– Ahs N, Commented Nov 26, 2015 at 12:54

Gabriel Augusto · Accepted Answer · 2015-11-26 13:13:38Z

3

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/

answered Nov 26, 2015 at 13:13

Gabriel Augusto

4364 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

some-non-descript-user Over a year ago

That's it. Thank you very much.

pauljohn32 Over a year ago

In chrome on Android, no borders show for me. Do they show for you?

TheTechGuy · Accepted Answer · 2015-11-26 13:01:42Z

1

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

answered Nov 26, 2015 at 13:01

TheTechGuy

17.5k18 gold badges120 silver badges144 bronze badges

2 Comments

some-non-descript-user Over a year ago

Like this the table rows/cells don't have a border, so if you hover over them, they kind of shift. That's why I put that part of the CSS there.

Tony Wu Over a year ago

Nice job hmd. I think you are right. @some-non-descript-user To make the border there, you can make it transparent.

Lidaranis · Accepted Answer · 2015-11-26 14:03:18Z

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

That's nice. Almost what I intended. But the borders are separated and you can see the shift from one row to the next. I like @Gabriel Augusto's solution better. +1

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Related