JSFiddle - React, Tailwind, and code Playground
HTML
<div class=wrapper-outer>
<div class="wrapper">
<div class="table">
<div class="tr">
<div class="th fixed">Fixed 1</div>
<div class="th">Lorem ipsum dolor</div>
<div class="th">Ipsum</div>
<div class="th">Sator</div>
</div>
<div class="tr">
<div class="td fixed">Fixed 1</div>
<div class="td">Lorem</div>
<div class="td">Ipsum</div>
<div class="td">Sator</div>
</div>
<div class="tr">
<div class="td fixed">Fixed 2</div>
<div class="td">Lorem</div>
<div class="td">Ipsum</div>
<div class="td">Sator</div>
</div>
<div class="tr">
<div class="td fixed">Fixed 3</div>
<div class="td">Lorem</div>
<div class="td">Ipsum</div>
<div class="td">Sator</div>
</div>
<div class="tr">
<div class="td fixed">Fixed 4</div>
<div class="td">Lorem</div>
<div class="td">Ipsum</div>
<div class="td">Sator</div>
</div>
<div class="tr">
<div class="td fixed">Fixed 5</div>
<div class="td">Lorem</div>
<div class="td">Ipsum</div>
<div class="td">Sator</div>
</div>
<div class="tr">
<div class="td fixed">Fixed 6</div>
<div class="td">Lorem</div>
<div class="td">Ipsum</div>
<div class="td">Sator</div>
</div>
<div class="tr">
<div class="td fixed">Fixed 6</div>
<div class="td">Lorem</div>
<div class="td">Ipsum</div>
<div class="td">Sator</div>
</div>
<div class="tr">
<div class="td fixed">Fixed 6</div>
<div class="td">Lorem</div>
<div class="td">Ipsum</div>
<div class="td">Sator</div>
</div>
<div class="tr">
<div...
CSS
.table
{
border-collapse:collapse;
border: 1px solid grey;
display: table;
}
.tr
{
display: table-row;
}
.th
{
display: table-cell;
border:1px solid grey;
white-space:nowrap;
font-weight: bold;
}
.td
{
display: table-cell;
border:1px solid grey;
white-space:nowrap;
margin:0;
}
.wrapper
{
overflow-x:scroll;
margin-left:100px;
overflow-y:visible;
}
.wrapper-outer
{
position: relative;
width: 300px;
}
.fixed {
position:absolute;
width:100px;
left:0;
top:auto;
margin-top:-16px;
}