JSFiddle - React, Tailwind, and code Playground
HTML
<div class="scrollable">
<table>
<thead>
<tr>
<th class="nothing_here">Nothing here</th>
<th>Tora Gargano</th>
<th>Emory Beck</th>
<th>Jane Doe</th>
<th>Yoshiko Beekman</th>
<th>Treasa Norris</th>
<th>Jane Doe</th>
</tr>
</thead>
<tbody>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Status</th>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
</tr>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Status</th>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
</tr>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Status</th>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
</tr>
<tr>
<th>Actions</th>
...
CSS
html {
overflow-y:hidden;
}
.scrollable tbody {
display: block;
height: 100px;
overflow-y: scroll;
}
.scrollable thead {
display: block;
}