JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
  </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
  </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
  </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
  </tr>
</table>

CSS

table, td {
    background-color: white;
    border: 2px solid red;
}

td {
    width: 40px;  
    height: 40px;
}

.highlighted {
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
}

.highlighted_left{
    border-right: 2px solid black;
}

JavaScript

$('td').hover(function() {
    var t = parseInt($(this).index());
    $('tr td').removeClass('highlighted');
    $('tr td').removeClass('highlighted_left');
    $('tr td:nth-child(' + (t+1) + ')').addClass('highlighted');
    $('tr td:nth-child(' + (t) + ')').addClass('highlighted_left');
});