Highlight Rows Across Two Adjacent Tables With Css

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 c

Solution 1:

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#lhstr:hover {
    background-color:green;
}
table#lhstr:hover {
    background-color:green;
}
#lhstd:hover::before {
    background-color: green;
    content:'\00a0';
    position: absolute;
    width: 10000px;
    z-index: -1;
}
td {
    position: relative;
}

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