2

Estava desenvolvendo uma tela, que continha uma tabela com um estilo no tr:hover para quando o usuário passasse o mouse sobre as linhas da mesma, elas ficassem com um aspecto diferente. Tudo estava indo bem até o momento em que eu resolvi que queria colocar uma "bendita borda" em volta da linha no :hover, sendo que os <td>'s já possuem borda.

Demo no JSFiddle

Acontece que a borda do <tr> não aparece na frente. E então o que fazer?

1
  • @PauloRoberto: cara, a gramática de sua edição não está melhor não... "da qual possui", "do qual o usuário passa o mouse"... Commented 19/02/2014 às 22:34

1 Resposta 1

3

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

Demo no JSFiddle


3
  • 1
    @PauloRoberto: Já aqui, sua edição ajudou... realmente "estória", é só para contos. Como tudo aqui são fatos, então "história" cai bem melhor. Commented 19/02/2014 às 22:42
  • 1
    @PauloRoberto: Além de ter ajudado com os TD's e TR's... valeu cara! Commented 19/02/2014 às 22:44
  • de nada, disponha :} Commented 19/02/2014 às 22:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .