How to place a border on a <tr> that appears above the edge of the <td>?

Question

I was developing a screen, which contained a table with a style tr:hover for when the user hovers over the lines of it, they look different. Everything was going well until the moment I decided I wanted to put one "blessed edge" round the line on :hover, whereas the <td>'s already have edge.

Demo at Jsfiddle

Turns out the edge of the <tr> does not appear in front. And then what to do?

Answer 1

Explanation based on experiments:

It turns out that when the edges of the table are with the attribute collapsed, the <tr>'s and <td>'s share the same edges. Therefore, there is no way to display the edge of the <tr> at the same time as <td>... but that’s not the whole story.

There is a rule for the border defined in the style of the <tr> is used instead of the one defined in the <td>.

Experimentally, I noticed that thicker edges have priority. So if the thicker edge is in the <tr>, this is the one that will be used. If both have the same thickness, the border defined for the <td> will be used.

• 3 pixels (highest priority)
• 2 pixels
• 1 pixel (lowest priority)

Using separate units also does not seem to affect... what matters is the actual measure calculated. If 0.1em result in 2 pixels, then you will have more priority than the edge of 1px.

Different styles also have different priorities. In Chrome and Firefox the following priority queue is worth:

• Hidden (highest priority)
• double
• Solid
• dashed
• dotted (lowest priority)

    _{P.S.: I’m ignoring all styles of 3D borders}

The order of styles, or put !important in style has no effect.

How to solve the problem?

To solve the original problem, with a 1 pixel edge, we can use a hack: use double style with 1px on <tr>, and a style Solid with 1px in <td>, making the style set for the <td> finally appear.

tr:hover {
    border: 1px double red;
}

td {
    border: 1px solid gray;
}

Demo at Jsfiddle

---