How to Extend CSS Hover Effects Beyond Cell Boundaries in Tables?

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: '<pre class="brush:php;toolbar:false"><table border="1">
    <tr>
        <th></th>
        <th>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #ffa; content: 'a0'; 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:

Example Output

Hovering over a cell now highlights both the corresponding row and column:

[Image of a table with highlighted row and column]

This approach works seamlessly in modern browsers and degrades gracefully in older browsers.

The above is the detailed content of How to Extend CSS Hover Effects Beyond Cell Boundaries in Tables?. For more information, please follow other related articles on the PHP Chinese website!