Loss: hover over <tr> between <td> in Chrome

Question

I'm trying to create a simple table row hover effect by changing the background color of a row when users hang over it, it was quite simple:

tr:hover { background: red; } 

However, I noticed an error in chrome where there is a small space between the cells in the row where I lose :hover and <tr> clicks the style on / off when you move it, although my mouse is still on the row.

I tried border-collapse: collapse , cellspacing="0" , but I can’t understand why I lose the <tr> cursor between cells, this happens only on one side of the cells, not higher / lower than them. It works as expected in Firefox.

Here's the JSFiddle , in Chrome, try moving the mouse slowly from “first” to “second”, and you'll see there is a very thin point between them where <tr> loses focus.

I reported this as a Chromium bug here .

Answer 1

I have no idea why this works, but setting the positioning in the <td> elements seems to fix this in Chrome.

 td { padding: 2px 5px; position:relative; } 

JsFiddle example .