JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="table-wrapper">
    <div class="table-sticky">
        <table>
            <tr>
                <th>
                th1
                </th>
                <th>
                    th2
                </th>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
        </table>
    </div>
    
</div>

CSS

.table-wrapper {
    overflow-y: hidden;
    overflow-x: auto;
}

table {
    width: 100%;
}

th {
    position: sticky;
    top: 0;
    background-color: blue;
    height: 120px;
}

td {
    height: 100px;
    background-color: red;
}