Extending CSS Hover Effects Beyond Cell Boundaries: Highlighting Tables in Cols, Colgroups

When displaying data in tabular form, highlighting specific cells on hover is often desirable. However, highlighting the row and column intersecting with the hovered cell can further enhance data clarity. This is especially useful when the table spans multiple units of measurement.

Pure CSS Solution

Fortunately, achieving this extended highlighting effect is possible with pure CSS. By utilizing pseudo-elements (::before, ::after), z-index manipulation, and absolute positioning, we can create highlight overlays that extend beyond cell boundaries.

Implementation

The following CSS code illustrates the implementation:

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

HTML Structure

The corresponding HTML structure includes additional classes .row and .col for row and column headers, respectively: