Cómo crear una tabla con resaltado en columnas y filas (vertical y horizontal) con CSS y HTML

Cuando trabajas con tablas HTML, hacerlas legibles y agradables no siempre es trivial. En mi caso, una de las primeras mejoras que suelo aplicar es el resaltado al pasar el cursor, porque ayuda muchísimo a interpretar los datos. Resaltar filas es sencillo, pero cuando quieres resaltar filas y columnas a la vez, la cosa se pone interesante.

En este artículo te voy a mostrar, paso a paso, cómo crear una tabla con resaltado horizontal y vertical usando solo CSS, explicando no solo el cómo, sino también el por qué de cada técnica.

En esta entrada veremos cómo crear una tabla sencilla con resaltado (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):

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

• Resaltar las columnas
• Resaltar las filas

Resaltar filas en una tabla HTML con CSS

Empecemos por lo fácil. Cuando probé por primera vez este efecto, el resaltado de filas fue casi inmediato: las filas sí existen como elemento (tr), así que CSS lo pone muy fácil.

Basta con aplicar la pseudoclase :hover sobre las filas del cuerpo de la tabla:

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

Y con esto tenemos el siguiente efecto:

Con esto conseguimos que, al pasar el ratón por encima de una fila, toda la línea se destaque visualmente. Es simple, limpio y funciona en todos los navegadores modernos.

Este es siempre mi primer paso, porque mejora la legibilidad de inmediato y no tiene efectos secundarios.

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 :).

Por qué resaltar columnas es más complicado

El problema es que HTML no tiene un elemento que represente una columna completa. Tenemos filas (tr) y celdas (td, th), pero no columnas como tal.

Por eso, no existe algo como:

col:hover { ... }

Así que toca pensar un poco diferente. La solución que mejor resultado me ha dado consiste en crear un contenedor “extra” de forma dinámica cuando el cursor pasa sobre una celda.

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 que actúe como una sombra alargada.

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;
}

Lo importante es que ese pseudoelemento:

• Sea position: absolute
• Sea mucho más alto que la tabla
• Quede por detrás del contenido

Antes de aplicarlo a la tabla, este es el concepto base:

Obtenemos:

Resaltar columnas al pasar el cursor

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 técnica de usar valores grandes negativos (-9999px) puede parecer bruta, pero es tremendamente efectiva. En la práctica, el pseudoelemento cubre toda la columna visible, independientemente de la altura real de la tabla.

Este enfoque es mucho más robusto que intentar calcular alturas exactas.

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:

Combinando resaltado horizontal y vertical

Una vez tienes ambos efectos definidos, lo mejor es combinarlos. Para que funcione correctamente, hay un detalle importante que siempre aplico:

td, th {
 position: relative;
}
table {
 overflow: hidden;
}

Esto asegura que:

• Los pseudoelementos se posicionen correctamente
• El resaltado no se salga de la tabla

El resultado es un efecto cruzado muy claro: al pasar el cursor por una celda, se resalta su fila y su columna al mismo tiempo.

Detalles visuales y buenas prácticas

Con el tiempo he aprendido que menos es más. Algunos consejos prácticos:

• Usa colores con rgba() y poca opacidad
• Evita contrastes demasiado agresivos
• Combina este efecto con rayas de cebra (nth-child) si la tabla es grande

Ejemplo de rayas horizontales:

tbody tr:nth-child(even) {
 background-color: #f2f2f2;
}

Esto mejora mucho la lectura cuando hay muchos datos.

Limitaciones y consideraciones importantes

Conviene tener claras algunas cosas antes de usar este truco en producción:

• El uso de z-index: -1 puede dar problemas si la tabla está dentro de contenedores con fondo
• :hover no funciona igual en dispositivos táctiles
• No es buena idea anidar tablas con este efecto

En proyectos reales, cuando necesito soporte táctil completo, suelo complementar esto con :focus o directamente con JavaScript.

¿Es posible hacerlo sin JavaScript?

Sí, y este artículo es la prueba. En escritorio funciona perfectamente solo con CSS. Para móvil, el comportamiento depende del navegador, pero sigue siendo una solución muy válida para la mayoría de casos.

Preguntas frecuentes

• ¿Se puede resaltar una columna completa solo con CSS?
  • Sí, usando pseudoelementos (::before o ::after) sobre las celdas.
• ¿Por qué no existe un selector de columnas en CSS?
  • Porque las columnas no son nodos reales en el DOM de una tabla HTML.
• ¿Funciona este efecto en móviles?
  • Parcialmente. :hover no es ideal en pantallas táctiles, aunque puede adaptarse con :focus.
• ¿Es mejor usar JavaScript?
  • Solo si necesitas interacciones más complejas o soporte táctil perfecto.

Conclusión

Resaltar filas y columnas en una tabla HTML es totalmente posible usando solo CSS, siempre que entiendas las limitaciones del lenguaje. En mi caso, este truco con pseudoelementos se ha convertido en un recurso habitual cuando quiero mejorar la experiencia de usuario sin añadir JavaScript innecesario.

Si entiendes el concepto del “contenedor extra”, el resto encaja solo.