DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
05-05-2016

En esta entrada veremos cómo crear una tabla sencilla con resaltados (highlight) en las que al pasar el cursor sobre las distintas celdas que componen la tabla las secciones horizontales y verticales (columnas y filas) de la tabla se activan (resaltan):

Tabla con resaltado en columnas y filas (vertical y horizontal)

Tomando la idea explicada anteriormente podemos dividir el desarrollo en dos partes:

Resaltar las filas

Marcar la fila es en realidad muy fácil; basta con indicar el selector hover sobre la fila:

tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

Y con esto tenemos el siguiente efecto:

Tabla con resaltado en filas (horizontal)

Resaltar las columnas

Aquí la cosa no es tan directa ya que no hay un elemento que define una columna; en vez de eso debemos crear un contenedor "extra" de manera dinámica al posicionarnos encima de la celda; suena complicado, pero no lo es y ya lo hemos realizado antes :).

Creando un contenedor extra a partir del selector before

Cómo se mencionó anteriormente, este "truco" se ha realizado antes, y consiste en que a partir de un elemento, podemos crear una especie de "sombra" o contenedor "extra" con el selector before o after que es el mismo truco que empleamos en Cómo hacer una simple nube en CSS.

En resumen, con el siguiente CSS:

.cuadro{
 width: 50px;
 height: 50px;
 background: #F00;
}

.cuadro:before {
 content: "";
 width: 50px;
 height: 50px;
 position:absolute;
 top: 100px; 
 background-color: rgba(0, 255, 255, 0.2);
 z-index: -1;
}

Obtenemos:

Tabla con resaltado en filas (horizontal)

Teniendo esta idea clara, podemos modificarla de la siguiente manera para que trabaje sobre las celdas; el position: absolute en conjunto con las posiciones negativas permite generar un contenedor alargado sobre la celda en la que ubiquemos el cursor:

tbody td:hover:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9999px;
  bottom: -9999px;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -1;
}
La propiedad content es fundamental para generar el contenedor "extra".

Sólo es definido el contenedor "extra" al momento de posicionar el cursor encima de la celda (de ahí el porqué del encadenamiento de los selectores hover y before) y con esto obtenemos:

El resto del CSS es de fácil interpretación; el recurso fuente lo puedes encontrar en el siguiente enlace: .


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Un waffle con CSS

Un waffle con CSS

3D Box Control conTweenMax

3D Box Control conTweenMax

Algunos artículos que te pueden interesar

Transformando un botón de un estado a otro con CSS

Transformando un botón de un estado a otro con CSS

Se explica cómo transformar un botón con CSS y JavaScript.

Andrés Cruz 02-08-2016

Como mostrar contenido en columnas expandibles con solo CSS

Como mostrar contenido en columnas expandibles con solo CSS

En este artículo veremos una forma de mostrar contenido a través de columnas expansibles.

Andrés Cruz 21-07-2014

La función calc en CSS

La función calc en CSS

Calc es una función disponible en CSS3 que permite realizar operaciones matemáticas desde el propio CSS; las operaciones de sumar ( + ), restar ( - ), multiplicar ( * ) y división ( / ) son soportadas a través de la función calc.

Andrés Cruz 16-02-2015