¿Cómo lidiar con `rowspan` y colores de fondo dentro de una tabla?

Tengo una tabla HTML genérica con un poco de estilo de color de fondo CSS. Cuando un usuario se desplaza sobre una fila, el color de fondo de todas las celdas de esa fila cambia a gris claro.

Tengo una celda en mi fila superior que abarca tres filas. Cuando me desplazo sobre la fila superior, la celda se sombrea adecuadamente. Sin embargo, al pasar el cursor sobre la segunda y tercera filas, la celda no está sombreada.

¿Es posible sombrear la celda dentro de la segunda o tercera fila? ¿Como podría hacerlo?

Código relevante:

style.css

td { border: black 1px solid; text-align: center; padding-left: 5px; padding-right: 5px; } tr:hover td { background-color: #DDD; } th { border: none; } 

table.html

  Row 1:Col 1 Row 1:Col 2 Row 1/2/3:Col3   Row 2:Col 1 Row 2:Col 2   Row 3:Col 1 Row 3:Col 2  

Se puede lograr usando JavaScript así:

   
Row 1:Col 1 Row 1:Col 2 Row 1/2/3:Col3
Row 2:Col 1 Row 2:Col 2
Row 3:Col 1 Row 3:Col 2

No estoy seguro de cómo uno puede lograr lo que quiere simplemente con HTML / CSS. Por cierto, puedes simplificar el JavaScript anterior usando jQuery, te ahorraría algo de tipeo.

Mejor, Kamran

¿Qué navegadores se prueban? ¿El ejemplo funciona si elimina rowspan = 3 TD? (Si lo hace, esto es bastante un error / característica).

Otra forma de hacerlo es usando script para alterar el nombre de clase en TR.

 td { background-color: #fff; } .hover td { background-color: #ddd; } 

Puede ser realmente necesario en este caso.

Tomé la respuesta de socialgeek como una confirmación de que no hay una implementación de solo CSS y que este es el mejor enfoque en JS.

Pero lo he implementado de la manera más genérica para que el código pueda entrar en el script central de JS para todo mi sitio. Debería resolver el problema para cualquier celda de tabla con rowspan definido.

Este es mi CSS:

 tr.hover, th.hover, td.hover, tr.hoverable:hover { background-color: grey; } 

Una fila de tabla común estará rodeada por CSS ‘ :hover pseudo-class. Cualquier fila, así como

s y

s se mantendrán en la fuerza cuando se .hover clase .hover . Ese solo trabajo es perfecto para tablas simples.

Este es el código JS como una solución genérica para tablas complejas:

 $(document).ready(function() { // find all / with rowspan in hoverable  $('tr.hoverable [rowspan]').each(function(index, cell) { var $cell = $(cell); var rowspan = $cell.attr('rowspan'); var limit = rowspan - 1; // :lt() is zero-based var $this_row = $cell.closest('tr'); var $next_rows = $this_row.nextAll('tr:lt(' + limit + ')'); $next_rows.hover( function() {$cell. addClass('hover')}, function() {$cell.removeClass('hover')} ); }); }); 

Agrega detectores de eventos para mouseenter y mouseleave a las filas que siguen a una fila con el conjunto de atributos rowspan . El truco es recolectar los elementos correctos y luego simplemente se debe alternar la clase CSS.

Problema aún por resolver: en mi página los oyentes del evento son llamados tres veces cada uno. No sé exactamente por qué. Es un poco inútil, pero el código no es tan grueso como no pude ignorar eso.

Probé el código solo en Firefox 22 con jQuery 2.0.3, donde el resultado es perfectamente intencionado.

Actualización: lo encontré útil y extendí el código para resaltar todas las filas relacionadas con la celda rowspan cuando esta celda está suspendida. Agregue el siguiente fragmento a la función larga anterior:

  $cell.hover( function() {$next_rows. addClass('hover')}, function() {$next_rows.removeClass('hover')} );