JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <table>
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

div
{
    width: 500px;
    height: 100px;  
    overflow: auto;
}

table
{
    width: 100%;
    border: 1px solid #444444;
    border-collapse: collapse;
    table-layout: fixed;
}

thead
{
    background-color: #444444;
    color: #FFFFFF;
    position: -webkit-sticky;
    position: sticky;    
    top: 0;
}

tbody
{
    height: 50px;
}

tbody td
{
    border: 1px solid #CCCCCC;
}