JSFiddle - React, Tailwind, and code Playground
by bnd5k
HTML
<div id='big_table'>
<table>
<tr>
<div class='headers'>
<div class='fixed_cols'>
<th>
<span class="header info">Category</span>
</th>
<th>
<span class="header info">Institution</span>
</th>
<th>
<span class="header info">Name</span>
</th>
</div><!--end fixed_cols -->
<div class="scrollable_area">
<th>
<span class="header month">
month1
</span>
</th>
<th>
<span class="header month">
month2
</span>
</th>
<th>
<span class="header month">
month3
</span>
</th>
</div><!-- end scrollable area -->
</div><!-- end headers -->
</tr><!--end header row -->
<tr>
<td>
'asdf'
</td>
<td>
'asdf'
</td>
<td>
'asdf'
</td>
<td>
123
</td>
<td>
564
</td>
<td>
849
</td>
</tr>
<tr>
<td>
'asdf'
</td>
<td>
'asdf'
</td>
<td>
'asdf'
</td>
<td>
123
</td>
<td>
564
</td>
<td>
849
</td>
</tr>
</table>
</div><!--end big table -->CSS
#big_table {
width:200px;
overflow-x: scroll;
}
.fixed_cols {
}
.scrollable_area {
}