Estendendo os efeitos de foco do CSS além dos limites das células: destacando tabelas em colunas, grupos de colunas

Ao exibir dados em formato tabular, destacando células específicas ao passar o mouse muitas vezes é desejável. No entanto, destacar a linha e a coluna que se cruzam com a célula focalizada pode aumentar ainda mais a clareza dos dados. Isso é especialmente útil quando a tabela abrange várias unidades de medida.

Solução CSS pura

Felizmente, é possível obter esse efeito de realce estendido com CSS puro. Utilizando pseudoelementos (::before, ::after), manipulação de índice z e posicionamento absoluto, podemos criar sobreposições de destaque que se estendem além dos limites das células.

Implementação

O seguinte código CSS ilustra a implementação:

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

Estrutura HTML

A estrutura HTML correspondente inclui classes adicionais .row e .col para cabeçalhos de linha e coluna, respectivamente: