Highlight rows across two adjacent tables with CSS

Question

I have a layout with two adjacent tables. When a row in one table is hovered, I'd like to apply the same style to the cells in the rows across both tables.

Is this possible with css only?

table{
    display: inline-block;
    
}
td{
    border:1px solid grey;
}
table#lhs tr:hover{
    background-color:green;
}
table#lhs tr:hover {
    background-color:green;
}

<table id="lhs">
    <tr>
        <td>lhs row 1</td>       
    </tr>
    <tr>
        <td>lhs row 2</td>       
    </tr>
    <tr>
        <td>lhs row 3</td>       
    </tr>
</table>
<table id="rhs">
    <tr>
        <td>rhs row 1</td>
    </tr>
    <tr>
        <td>rhs row 2</td>
    </tr>
    <tr>
        <td>rhs row 3</td>
    </tr>
</table>

No, this isn't possible in CSS; because to find the sibling `` you'd have to navigate *up* from the hovered `` to find that sibling. — David Thomas, Feb 13 '15 at 21:49
that's what I thought... no parent selector so it's not possible. Boo. — Will Jenkins, Feb 13 '15 at 21:49
Precisely (unfortunately), easily do-able in JavaScript though, if that's an option? — David Thomas, Feb 13 '15 at 21:49
In which case you need to edit your question (if you're planning to accept JavaScript solutions) or delete it (since it's effectively, currently, a duplicate of "[Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector)") — David Thomas, Feb 13 '15 at 21:55

score 2 · Accepted Answer · answered Feb 14 '15 at 20:29

I came up with this, which seems pretty close to what you were asking for:

table {
    display: inline-block;
}
div {
    overflow:hidden;
    float:left;
}
td {
    border:1px solid grey;
}
table#lhs tr:hover {
    background-color:green;
}
table#lhs tr:hover {
    background-color:green;
}
#lhs td:hover::before {
    background-color: green;
    content:'\00a0';
    position: absolute;
    width: 10000px;
    z-index: -1;
}
td {
    position: relative;
}

<div>
    <table id="lhs">
        <tr>
            <td>lhs row 1</td>
        </tr>
        <tr>
            <td>lhs row 2</td>
        </tr>
        <tr>
            <td>lhs row 3</td>
        </tr>
    </table>
    <table id="rhs">
        <tr>
            <td>rhs row 1</td>
        </tr>
        <tr>
            <td>rhs row 2</td>
        </tr>
        <tr>
            <td>rhs row 3</td>
        </tr>
    </table>
</div>

Highlight rows across two adjacent tables with CSS

1 Answers1

Linked