JSFiddle - React, Tailwind, and code Playground

by Glyndwr

HTML

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-success">
			<h3 class="form-line-heading">YPR Award Bulk Update - Milestones</h3>

			<form data-toggle="validator" role="form" id="selectMilestone">
				<div class="container-fluid">
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
						
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
						
							<table>
								<colgroup>
									<col span="1" style="background-color:#ffffff">
									<col span="36" style="background-color:#BDD7EE">
									<col span="36" style="background-color:#C6E0B4">
									<col span="48" style="background-color:#F8CBAD">
								</colgroup>
								
								<thead>
									<tr class="first">
										<th rowspan="3" class="sticky-col">Name</th>
										<th colspan="36">M1 - 24 participates (6 from each Challenge Area); 
										2 Assists (from two different Challenge Areas);
										1 Lead</th>
										<th colspan="36">M2 - 20 participates (5 from each Challenge Area); 
										3 Assists (from two different Challenge Areas);
										2 Leads</th>
										<th colspan="48">M3 - 16 participates (4 from each Challenge Area); 
										4 Assists (from at least two different Challenge Areas);
										4 Leads</th>
									</tr>
									
									<tr class="second">
										<!-- M1 -->
										<th colspan="8">Personal Growth</th>
										<th colspan="8">Community</th>
										<th colspan="8">Creative</th>
										<th colspan="8">Outdoor</th>
										<th rowspan="2">Personal Reflection</th>
										<th rowspan="2">Promise &amp; Law</th>
										<th rowspan="2">Completed</th>
										<th rowspan="2">Awarded</th>
										
										<!-- M2 -->
										<th colspan="8">Personal Growth</th>
										<th colspan="8">Community</th>
										<th colspan="8">Creative</th>
										<th colspan="8">Outdoor</th>
										<th rowspan="2">Personal Reflection</th>
										<th rowspan="2">Promise &amp; Law</th>
										<th...

CSS

td {
		text-align: center; 
		vertical-align: middle;
	}
	
	/*
	table {
		display: block;
		overflow: scroll;
	}
	*/
	table, th, td {
		border: 1px solid black;
		padding-left: 10px;
		padding-right: 10px;
	}
	  
	table thead tr.first th {
		padding: 3px;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1;
		background: white;
	}
	
	table thead tr.second th {
		padding: 3px;
		position: -webkit-sticky;
		position: sticky;
		z-index: 1;
		background: white;
	}
	
	table thead tr.third th {
		padding: 3px;
		position: -webkit-sticky;
		position: sticky;
		z-index: 1;
		background: white;
	}
	
	.sticky-col {
		position: -webkit-sticky;
		position: sticky;
		left: 0;
		background: white;
		z-index: 2;
	}

JavaScript

//Set the heights of the first, second and third rows (headings)
	var firstheight = $('.first').height();
    $("thead tr.second th").css("top", firstheight);
    
    var secondheight = $('.second').height();
    var fs = firstheight + secondheight;
    $("thead tr.third th").css("top", fs);