JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
</table>

CSS

.hover {
    background-color: yellow !important;
    color: #000;
}
td {cursor: pointer}
td:hover {background-color: red !important}

JavaScript

$('table').delegate('td', 'mouseenter mouseleave', function(e) {
    var self = $(this);
    var i = self.index();
    var parent = self.parent();
    var tb = $('table');
    var rows = tb.find('td:nth-child(' + (i + 1) + ')');
    switch (e.type) {
        case 'mouseenter':
            parent.find('td').addClass('hover');
            rows.addClass('hover');
            break;
        case 'mouseleave':
            parent.find('td').removeClass('hover');
            rows.removeClass('hover');
            break;
    }
});