Esquema de la fila del esquema al pasar el cursor

Question

Estoy tratando de resaltar el borde de una fila de la tabla al pasar el mouse. Desafortunadamente, esto solo funciona para la primera fila de celdas. Las filas inferiores tienen un borde que no cambia de color. He intentado usar outline pero no funciona bien con :hover en webkit.

http://jsfiddle.net/S9pkM/2/

Imagínese su html tabla estándar. Algunos tr con algunos td. Al pasar el cursor sobre una fila, debe resaltar su borde en rojo.

table { border-collapse: collapse; } /*I am aware of separate */ 
table td { border: 3px solid black; } 
table tr:hover td { border-top-color: red; border-bottom-color: red; } 
table tr:hover td:first-child { border-left-color: red; } 
table tr:hover td:last-child { border-right-color: red; } 

Estoy abierto a enfoques alternativos, pero estoy atascado con la estructura de la tabla. No inserte html adicional además del estándar <table> <tr> <td>

Answer 1

que he tenido que hacer frente este mismo problema y finalmente encontró una solución más simple here.

Usted puede usar este truco CSS (border-style: double;) que funciona para 1px fronteras:

#mytable tr.row:hover td 
{ 
    border-style: double; 
    border-color: red; 
} 

Esto hará que su trabajo border-color (sea la parte superior más uno) no importa qué. :-)

Answer 2

¿por qué no usar un borde separado? http://jsfiddle.net/S9pkM/6/

Answer 3

Para bordes de 1px, consulte la solución de Leniel que usa border-style: double. Esto es mucho más simple. Un borde doble es uno que muestra una línea de 1px para los bordes interno y externo del borde. Esto no hace nada para un borde de 1px, pero en> 1px hay un espacio.

Para bordes> 1px se elimina el borde inferior de todos los <td> con border-bottom: 0. Los bordes superiores de las otras celdas mantendrán todo mirando como deberían, a excepción de la última fila. La última fila lo arreglamos con tr:last-child td { border-bottom: your border style }. Finalmente, en su pseudoclases flotante, establece el borde inferior.

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */ 
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; } 
table tr:last-child td { border-bottom: 1px solid black; } 
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; } 
table tr:hover td:first-child { border-left-color: red; } 
table tr:hover td:last-child { border-right-color: red; } 

Answer 4

sólo hay que poner este código en su sección de la cabeza:

<style> 
    table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;} 
    table td:hover {border:2px solid red; } 
</style>