JSFiddle - React, Tailwind, and code Playground

by Harisankaran Parameswaran

HTML

<table>
    <thead>
        <! -- This thead needs to stay in a fixed position-->
        <tr>
            <th>a</th>
            <th>a</th>
        </tr>
    </thead>
    <tbody>
        <! -- This tbody needs to stay in a fixed position-->
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
    </tbody>
    <tbody class='second'>
        <! -- This tbody needs to scroll -->
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
    </tbody>
</table>

CSS

thead, tbody {
    display: block;
    border: 1px solid black;
}
tbody:nth-child(3) {
    height: 75px;
    /* Just for the demo          */
    overflow-y: auto;
    /* Trigger vertical scroll    */
    width: 100px;
}