JSFiddle - React, Tailwind, and code Playground
HTML
<div class="overlay">
<div class="table-container">
<table>
<thead>
<th>
<td>head1</td>
<td>Head2</td>
</th>
</thead>
</table>
<div class="test">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
...
CSS
.overlay {
position: absolute;
border: 1px solid red;
width: 90%;
}
table {
table-layout: fixed;
}
.test {
height: 100%;
max-height: 200px;
overflow: auto;
}