JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<table id="tabl" tabindex="1">
<thead>
<tr>
<th style="font-weight: bold">merd</th>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>first</td>
</tr>
<tr>
<td>second</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
...
CSS
table {
table-layout: fixed;
font-family: arial;
font-size: 11px;
text-align: left;
outline: none;
width: 625px;
}
div {
overflow-y: auto;
overflow-x: hidden;
height: 150px;
width: 300px
}
JavaScript
$('#wrapper').scroll(function(){
$(this).data( {posY: $(this).scrollTop()} )
})
.blur(function(){
$(this).scrollTop( $(this).data("posY") );
})