Extensión de los efectos de desplazamiento de CSS más allá de los límites de las celdas: resaltado de tablas en columnas y grupos de columnas

Al mostrar datos en forma tabular, se resaltan celdas específicas al pasar el mouse suele ser deseable. Sin embargo, resaltar la fila y la columna que se cruzan con la celda flotante puede mejorar aún más la claridad de los datos. Esto es especialmente útil cuando la tabla abarca varias unidades de medida.

Solución CSS pura

Afortunadamente, lograr este efecto de resaltado extendido es posible con CSS puro. Al utilizar pseudoelementos (::before, ::after), manipulación del índice z y posicionamiento absoluto, podemos crear superposiciones de resaltado que se extienden más allá de los límites de las celdas.

Implementación

El siguiente código CSS ilustra la implementación:

table {
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;        
}

td:hover::after,
.col:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

Estructura HTML

La estructura HTML correspondiente incluye clases adicionales .row y .col para encabezados de fila y columna, respectivamente: