JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<div class="tableBody">
    <table border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th><span>C1</span></th>
                <th><span>Column 2</span></th>
                <th><span>Column 3</span></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data data data data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.tableBody {
    position:relative;
    padding-top:30px;
}
thead {
    position:absolute;
    top:0;
    background:#eee;
    width:500px;
}
tbody {
    display:block;
    height:100px;
    width:500px;
    overflow:auto;
    border:3px solid pink;
}
tbody > tr:first-child td {
    position:relative;
    padding-top:30px;
}