JSFiddle - React, Tailwind, and code Playground

HTML

<table class="coltest">
    <colgroup><col/><col/></colgroup>

    <thead><td>Left</td><td>Right</td></thead>    
    <tbody>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>3</td><td>4</td></tr>
    </tbody>
</table>

CSS

.colhover {
      background-color: yellow;
}

/*
  Table neatness CSS
*/ 
table.coltest{
    border-width: 2px;
    border-spacing: 2px;
    border-style: solid;
    border-color: gray;
    border-collapse: collapse;
    width:100px;
}
table.coltest th {
    border-width: 2px;
    padding: 2px;
    border-style: solid;
    border-color: gray;
    -moz-border-radius: ;
}
table.coltest td {
    border-width: 1px;
    padding: 2px;
    border-style: solid;
    border-color: gray;
    -moz-border-radius: ;
}

JavaScript

$("table.coltest td").hover(function() {
    // get the colgroup at this elements specific index (col1, col2, etc)
    $("col").eq($(this).index()).addClass('colhover');
}, function() {
    $("col").eq($(this).index()).removeClass('colhover');
});