Artículos
CSS

Resaltar filas de tabla con CSS

13/Jun/2015

En este ejemplo vamos a ver como al mover el cursor sobre una tabla hagamos el efecto de resaltar filas de tabla con CSS. Es decir que se ilumine la fila sobre la que esté el cursor, o que cambie de color.

Lo primer será generar una tabla en HTML. Así que veamos como sería esta tabla:


...
País Capital Superficie Habitantes
España Madrid 504.645 km2 46,6 M

Como siempre hay que ver los elementos HTML que forman la tabla. Esto es importante ya que daremos estilo a estos elementos. Los importantes son table, tr, td, th,… En este caso nos vamos a quedar con tr que es el que representa a la fila y nos servirá para el efecto que queremos hacer.

Ya hemos dicho que el efecto de resaltar filas de tabla con CSS lo vamos a ejecutar sobre el elemento tr, así que nuestra hoja de estilos CSS se tendrá que montar de la siguiente forma:

table tr {
 /* Estilos */
}

Lo que vamos a hacer es cambiar de color a la fila, así que manipularemos el atributo background-color, asignando un valor diferente al que tengan.

table tr {
  background-color: #f00;
}

Pero hasta ahora este código CSS lo que hace es poner todas las filas de rojo. Y nosotros solo queremos que sea cuando pasemos con el cursor. En este caso, al estilo hay que decirle que será en el caso de que se ejecute el selector hover. Este es el que representa que el ratón pase por el elemento.

Modificamos de nuevo nuestro código para añadir este efecto.

table tr:hover {
  background-color: #f00;
}

Con esto ya tendríamos conseguido el efecto de resaltar filas de tabla con CSS. Pero vamos a añadirle un plus más, que será el que cuando pasemos por la fila el cursor se nos transforme en puntero. En este caso deberemos de modificar la propiedad cursor y darle el valor de pointer para conseguir dicho efecto.

De esta manera nuestro código CSS final que consigue el efecto de resaltar filas de tabla con CSS quedaría de la siguiente forma:

table tr:hover {
  background-color: #f00;
  cursor: pointer;
}

Código Fuente

Descárgate el código fuente de Resaltar filas de tabla con CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
4 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios