JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr><td>0,0</td><td>1,0</td><td>2,0</td><td>3,0</td></tr>
<tr><td>0,1</td><td>1,1</td><td></td><td></td></tr>
<tr><td>0,2</td><td></td><td></td><td></td></tr>
<tr><td>0,3</td><td></td><td></td><td></td></tr>
</table>
CSS
table {
table-layout:fixed;
width:100%;
height:300px;
border-collapse:collapse;
}
td {
border:1px solid black;
}
.hover {
background:pink;
}
JavaScript
$('td').on('mouseover mouseout', function(){
$(this).toggleClass('hover');
$index = $(this).index()+1;
$index2 = $(this).parent().index()+1;
$index != $index2?$('tr:nth-child('+$index+') > td:nth-child('+$index2+')').toggleClass('hover'):'';
});