The trick is using huge pseudo elements on the <td>s, hidden by the table overflow
You don't really know how big the table is from CSS, so just make the pseudo elements super tall with a negative top value of half of that.
table {
overflow: hidden;
}
tr:hover {
background-color: #ffa;
}
td:hover::after,
th:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}
The negative
z-index keeps it below the content. Negative z-index is a fun trick, but beware this table then can't be nested within other elements with backgrounds, otherwise the highlight will go below them.
Then in the CSS you add :focus styles as well.
td:focus::after,
th:focus::after {
content: '';
background-color: lightblue;
position: absolute;
left: 0;
height: 10000px;
top: -5000px;
width: 100%;
z-index: -1;
}
td:focus::before {
background-color: lightblue;
content: '';
height: 100%;
top: 0;
left: -5000px;
position: absolute;
width: 10000px;
z-index: -1;
}
