JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<colgroup><col><col><col></colgroup>
<tr><th colspan="3">PROF PLANS</th></tr>
<tr><th>VPS1</th><th>VPS2</th><th>VPS3</th></tr>
<tr><td>test1</td><td>test2</td><td>test3</td></tr>
<tr><td>test1</td><td>test2</td><td>test3</td></tr>
<tr><td>test1</td><td>test2</td><td>test3</td></tr>
<tr><td>test1</td><td>test2</td><td>test3</td></tr>
</table>

CSS

table,
table td,
table th {
    padding: 5px;
    border: 1px solid grey;
}

table th {
    font-weight: bold;
    text-align: center;
}

.selected {
    background-color: cyan;
}

JavaScript

function highlightColumn (e) {
    var columnNumber = $(e.target).index();
    $('col').eq(columnNumber).addClass('selected');
    $('tr:first').addClass('selected');
}

function unhighlightColumn (e) {
    var columnNumber = $(e.target).index();
    $('col').eq(columnNumber).removeClass('selected');
    $('tr:first').removeClass('selected');
}

$('table').on('mouseover', 'td, th', highlightColumn);
$('table').on('mouseout', 'td, th', unhighlightColumn);