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

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

6 Loaders con CSS

6 Loaders con CSS

Menú Radial con solo CSS

Menú Radial con solo CSS

Algunos artículos que te pueden interesar

Dibujando nuestro propios SVG en HTML (parte 1)

Dibujando nuestro propios SVG en HTML (parte 1)

Un SVG no es más que un XML que describe como dibujar gráficos vectoriales en dos dimensiones y con HTML se ha hecho posible dibujarlos; en esta entrada veremos cómo dibujar formas básicas SVGs a través del elemento svg, definir estilo y sus atributos.

Andrés Cruz 11-05-2015

La pseudo-class :target en CSS

La pseudo-class :target en CSS

Este selector o pseudo-class es empleado para seleccionar o dar estilo a un único elemento cuyo id coincida en alguno de los elementos HTML.

Andrés Cruz 23-02-2015

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Se explica cómo crear un botones de tipo hamburguesa animado con CSS, HTML y una simple función de JavaScript, los botones se convierten una vez clickeados en flechas y/o X según sea el caso.

Andrés Cruz 09-08-2017