JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="outer-table">
<div class="table">
<div class="column">
<div class="header">Col 1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
</div>
<div class="column">
<div class="header">Col 2</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
</div>
<div class="column">
<div class="header">Col 3</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div...
CSS
DIV.outer-table
{
position:relative;
padding-top:1.5em;
}
DIV.table
{
height:200px;
overflow-y:auto;
border:1px solid black;
white-space:nowrap;
display:inline-block;
}
DIV.column
{
width:50px;
padding:0px;
height:100%;
display:table-cell;
}
DIV.spacer
{
width:18px;
padding:0px;
height:100%;
float:left;
}
DIV.header
{
position:absolute;
top:0px;
padding:0px 4px;
font-weight:bold;
}
DIV.cell
{
border:1px solid grey;
text-align:right;
}