Explicação baseada em experimentos:
Acontece que quando as bordas da tabela estão com o atributo collapsed, os <tr>
's e <td>
's compartilham das mesmas bordas. Sendo assim, não há como exibir a borda do <tr>
ao mesmo tempo que a do <td>
... mas isso não é toda a história.
Existe uma regra para que a borda definida no estilo do <tr>
seja usada, ao invés daquela definida no estilo do <td>
.
Experimentalmente, notei que bordas mais espessas, possuem prioridade. Portanto se a borda mais espessa estiver no <tr>
, esta é a que será usada. Se ambas tiverem a mesma espessura, a borda definida para o <td>
será usada.
- 3 pixels (maior prioridade)
- 2 pixels
- 1 pixel (menor prioridade)
Usar unidades distintas também não parece afetar... o que importa é a medida real calculada. Se 0.1em resultar em 2 pixels, então terá mais prioridade que a borda de 1px.
Estilos diferentes, também possuem prioridades diferentes. No Chrome e no Firefox vale a seguinte fila de prioridade:
- hidden (maior prioridade)
- double
- solid
- dashed
- dotted (menor prioridade)
P.S.: Estou ignorando todos os estilos de bordas 3D
A ordem dos estilos, ou colocar !important
no estilo não tem efeito.
Como solucionar o problema?
Para resolver o problema original, com uma borda de 1 pixel, podemos usar um hack:
usar o estilo double com 1px na <tr>
, e um estilo solid com 1px na <td>
, fazendo com que o estilo definido para a <td>
apareça finalmente.
tr:hover {
border: 1px double red;
}
td {
border: 1px solid gray;
}