Simple CSS-Only Row and Column Highlighting

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.

Go live

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;

}