JSFiddle - React, Tailwind, and code Playground

HTML

<table>  
	<colgroup></colgroup>
	<colgroup class="slim"></colgroup>
	<colgroup class="slim"></colgroup>
	<colgroup class="slim"></colgroup>
	<colgroup class="slim"></colgroup>   
	<thead>
	      <tr>
	           <th>1</th>
	           <th>2</th>
	           <th>3</th>
	           <th>4</th>
	           <th>5</th>
	       </tr>
	    </thead>	   
    	<tbody>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
       </tbody>
</table>

CSS

/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

#page-wrap { width: 600px; margin: 0 auto; }

table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 10px; }

.slim { width: 88px; }
.alo{ background-color: red;}
.hover { background-color: #eee; }

JavaScript

$(function() {

    $("table").delegate('td','mouseover mouseleave', function(e) {
        if (e.type == 'mouseover' && $(this).index() > 1) {
        $(this).addClass("alo");
        
          $(this).parent().addClass("hover");
          $("colgroup").eq($(this).index()).addClass("hover");
        } else {
        $(this).removeClass("alo");
          $(this).parent().removeClass("hover");
          $("colgroup").eq($(this).index()).removeClass("hover");
        }
    });

});