JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p>
Scroll down
</p>
<div class="wrapper">
<div class="table">
	<div class="row_header">
		<div class="cell"><span class="fixed">Name</span><span class="static">Name</span></div>
		<div class="cell"><span class="fixed">Age</span><span class="static">Age</span></div>
		<div class="cell"><span class="fixed">Site</span><span class="static">Site</span></div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div...

CSS

* {
  box-sizing:border-box;
}
.wrapper{

padding:10px;


 
  display:flex;
  justify-content:center;
  align-items:center;
}

.table{
  display:table;
  margin: 0 0 40px 0;
 max-width: 100%;
  
}

.row {
  display: table-row;

}

.cell {
  display: table-cell;
  border:1px solid black;
  padding:2px;


}

.row_header {
	display: table-row;
}
.row_header .cell {
  padding:0;
  height:0;
  font-size:0;
  border:0;
}
.row_header span.static {
  display:block;  
  height:0;  
  overflow:hidden;
  font-size:15px;
  padding:2px;
}
.row_header span.fixed {
  font-size:15px;
  position:absolute;
  width:inherit;
  background:red;
  border:1px solid #000;
  background:#ADD8E6;
  padding:2px;
  margin-top:-6px; /* Header cell height */
}
.row_header span.fixed.fixed-top {
  position:fixed;
  top:0;
  margin-top:0;
}

JavaScript

$('.row_header .cell').each(function(i) {
	width = $(this).width();
  $(this).find('span').attr('style', 'width:'+width+'px;');
})

$(window).scroll(function() 
{
  	if (window.pageYOffset >= $('.table').offset().top) 
	{
		$('.row_header .fixed').addClass('fixed-top');
	}
	else
	{
		$('.row_header .fixed').removeClass('fixed-top');
	}
});