JSFiddle - React, Tailwind, and code Playground

by extempl

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
{
    overflow-x: auto;
    width: 200px;
    overflow-y: visible;
}

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

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

tbody
{
    height: 50px;
}

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