I was developing a screen, which contained a table with a style in tr:hover , so when the user moves the mouse over the lines, they look different. Everything was going well until I decided that I wanted to put a "blessed border" around the line in :hover , with <td> 's already having border.
It turns out that the <tr> border does not appear on the front. So what to do?
It turns out that when the table borders have the collapsed attribute, the <tr> 's and <td> ' s share the same borders. Therefore, there is no way to display the border of <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 <tr> to be used, rather than the one defined in the <td> style.
Experimentally, I noticed that thicker edges have priority. So if the thickest border is in <tr> , this is the one that will be used. If both have the same thickness, the border set to <td> will be used.
Using separate units also does not seem to affect ... what matters is the calculated actual measure. If 0.1em results in 2 pixels, then it will have more priority than the 1px border.
Different styles also have different priorities. In Chrome and Firefox the following priority queue is worth:
Q: I'm ignoring all 3D border styles
The order of styles, or put !important in style has no effect.
To solve the original problem with a 1 pixel border, we can use a hack :
use the double style with 1px in <tr> , and a solid style with 1px in <td> , making the style set to <td> finally appear.
tr:hover {
border: 1px double red;
}
td {
border: 1px solid gray;
}