JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr><tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>


</table>

SCSS

* {
  box-sizing: border-box;
}

table {
  overflow: hidden;
  display: inline-block;
}

td, th {
    border: 1px solid #999;
    padding: 10px;
    position: relative;
}

td:hover::before {
    background-color: #ffa;
    content: '';
    height: 100%;
    left: -5000px;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: -2;
}


td:hover::after {
    background-color: #ffa;
    content: '';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}


body {
  margin: 8em;
}