JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar

HTML

<div class="fixedDiv">
<table class='haveAbsoluteFixed'>
    <tbody>
    <tr ><th>Absolute</th></tr>
    <tr ><td>Absolute</td></tr>
    <tr ><td>Relative</td></tr>
    <tr ><td>Rel</td></tr>
    <tr ><td>Rel</td></tr>
    <tr ><td>Rel</td></tr>
    <tr ><td>Rel</td></tr>
    <tr ><td>Rel</td></tr>
    <tr ><td>Rel</td></tr>
    <tr ><td>Rel</td></tr>
    <tr ><td>Rel</td></tr>
    <tr ><td>Rel</td></tr>
    </tbody>
</table>
</div>

CSS

.haveAbsoluteFixed>tbody tr:nth-child(1){
    position:absolute;
    color:#ff0000;
    width:100px;
    background:#ccc;
    z-index:2;
}
.haveAbsoluteFixed>tbody tr:nth-child(2){
    position:absolute;
    margin: 20px 0px 0px 0px; 
    background:#ccc;
    width:100px;
    z-index:2;
    color:#c3c;
}
.haveAbsoluteFixed>tbody tr:nth-child(3) td{
    padding-top: 40px; 
}
.haveAbsoluteFixed tbody tr td{
    border: 1px solid #ccc;
    height: 20px;
    width:100px;
}
.fixedDiv{
    height: 180px;
    overflow:scroll;
}