JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <body>
			<table class='fix-header'>
			<thead>
				<tr>
				<th>Name</th>
				<th>ID</th>
				<th>Favorite Color</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
				<td>Jim James John</td>
				<td>00001</td>
				<td>BlueBlueBlueBlueBlueBlueEVEN LONGER!</td>
				</tr>
				<tr>
				<td>Sue</td>
				<td>00002</td>
				<td>Red</td>
				</tr>
				<tr>
					<td colspan="2">Sue</td>
					<td>Red</td>
				</tr>
				<tr>
				<td>Barb</td>
				<td>00003</td>
				<td>Green</td>
				</tr>
				<tr>
					<td colspan="3">Jim</td>
				</tr>
				<tr>
				<td>Jim</td>
				<td>00001</td>
				<td>Blue</td>
				</tr>
				<tr>
				<td>Jim</td>
				<td>00001</td>
				<td>Blue</td>
				</tr>
				<tr>
				<td>Jim</td>
				<td>00001</td>
				<td>Blue</td>
				</tr>
				<tr>
				<td>Jim</td>
				<td>00001</td>
				<td>Blue</td>
				</tr>
				<tr>
				<td>Jim</td>
				<td>00001</td>
				<td>Blue</td>
				</tr>
				<tr>
				<td>Jim</td>
				<td>00001</td>
				<td>Blue</td>
				</tr>
				<tr>
				<td>Jim</td>
				<td>00001</td>
				<td>Blue</td>
				</tr>
				<tr>
				<td>Jim</td>
				<td>00001</td>
				<td>Blue</td>
				</tr>
				<tr>
				<td>Jim</td>
				<td>00001</td>
				<td>Blue</td>
				</tr>
			</tbody>
		</table>
</body>

CSS

.fix-header, table, thead, tbody, td, th{
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;         
}

table {border-collapse: collapse;}
.fix-header thead {display: block;}

.fix-header tbody{
	display: block;
	height: 262px;
	overflow: auto;
	overflow-x: hidden;
}

.fix-header td, .fix-header th {
  border: 1px solid #999;
  padding: 8px;
  text-align: left;
}

.fix-header tbody tr:nth-child(even){background-color: #c5eff9;}

.fix-header tbody tr td[colspan="3"]{background-color: red;}

JavaScript

var padding = window.navigator.userAgent.indexOf("MSIE ") > 0 ? 17.5 : 18;

$.each($('.fix-header'), function(){
	var table = this;
	$.each($('tbody tr:first', this).children(), function(index){
		$('thead th:nth-child('+(index+1)+')', table).width($(this).width()+padding);
	});
});