JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<table>
		<thead>
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
				<th>Header 3</th>
			</tr>
		</thead>		
		<tbody>				
		</tbody>
	</table>
</div>

CSS

#container {
	max-height:300px;
	overflow-y:auto;
    padding: 0;
}
thead tr:first-child {
    background-color:#00f;
    color:#fff;
    position: absolute;
    top: 0;
    left: 8px;
    right: 25px;
    display: block;
    box-sizing: border-box;
}
thead tr:first-child th {
    display: inline-block;
    color: #fc0;
    margin-right: -2px;
    background: #55f;
    box-sizing: border-box;
}

td, th {
    background: #aaa;
    width: 33%;
}
tbody tr:first-child td{
	padding-top:10px;
}
table {
    width: 100%;
    margin: 0;
    border: 1px #f00 solid;
}

JavaScript

$(document).ready(function(){
		for(var i=0; i<100; i++){
			$("tbody").append("<tr><td>My Data</td><td>Longer Data</td><td>More stuff</td></tr>");
		}
	});