JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id="page-wrap">	
	   <table>	   
	       <colgroup></colgroup>
	       <colgroup class="slim"></colgroup>
	       <colgroup class="slim"></colgroup>
	       <colgroup class="slim"></colgroup>
	       <colgroup class="slim"></colgroup>	   
	    <thead>
	       <tr>
             <th></th>
	           <th></th>
	           <th></th>
	           <th></th>
	           <th></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>
    		<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>
    		<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>
    		<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>
   ...

CSS

* { margin: 0; padding: 0;}
body { font: 14px Georgia, serif;}
#page-wrap { width: 600px; margin: 0 auto;}
table { border-collapse: collapse; width: 100%; margin-top: 109px;}
td { border: 1px solid #ccc; padding: 10px;}
thead { width: 100%; position: fixed; height: 109px; top: 0; background-color:red;}
.slim { width: 88px;}
.hover { background-color: #eee;}

JavaScript

$(function() {
    var i = 0;    
    $("colgroup").each(function() {    
        i++;        
        $(this).attr("id", "col"+i);    
    });    
    var totalCols = i;        
    i = 1;
    $("td").each(function() {    
        $(this).attr("rel", "col"+i);        
        i++;        
        if (i > totalCols) { i = 1; }    
    });
    $("td").hover(function() {    
        $(this).parent().addClass("hover");
        var curCol = $(this).attr("rel");
        $("#"+curCol).addClass("hover");    
    }, function() {    
        $(this).parent().removeClass("hover");
        var curCol = $(this).attr("rel");
        $("#"+curCol).removeClass("hover");    
    });
});