Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/07/2013, 17:34
Avatar de pzin
pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Estilos a celdas del mismo renglon

En principio no se puede hacer, porque una tabla se divide en filas, no en columnas.

Hay un pequeño truco para hacerlo. Necesitas primero ocultar lo que se va a salir de la tabla y que cada celda tenga una posición relativa:

Código CSS:
Ver original
  1. table {
  2.   overflow: hidden;
  3. }
  4.  
  5. td {
  6.   position: relative;
  7. }

Luego en el :hover, puedes usar el pseudo-elemento ::after para crear el efecto visual de las columnas. No es más que un elemento exageradamente grande y del mismo ancho que la celda. El top negativo es para que si se pasa por celdas de abajo siga igual.

Código CSS:
Ver original
  1. td:hover:after {
  2.   position: absolute;  
  3.   top: -10000px;
  4.   left: 0;
  5.   right: 0;
  6.   height: 20000px;
  7.   content: ' ';  
  8.   background-color: yellow;
  9.   z-index: -1;
  10. }