JSFiddle - React, Tailwind, and code Playground

HTML

before table
<table>
<tr class='header'>
    <th>Header</th>
    <th>Header 2</th>
</tr>
<tr>
    <td>long long long long</td><td>1</td>
</tr>
<tr>
    <td>2</td><td>1</td>
</tr>
<tr>
    <td>3</td><td>1</td>
</tr>
<tr>
    <td>4</td><td>1</td>
</tr>
<tr>
    <td>4</td><td>1</td>
</tr>
<tr>
    <td>4</td><td>1</td>
</tr>
<tr>
    <td>4</td><td>1</td>
</tr>
<tr>
    <td>4</td><td>1</td>
</tr>
<tr>
    <td>4</td><td>1</td>
</tr>
<tr>
    <td>4</td><td>1</td>
</tr>
<tr>
    <td>4</td><td>1</td>
</tr>
</table>
after table

CSS

tr.header, table {
    width: 80%;
    border: 1px solid black;
}
tr.header{
    background:red;
    position:absolute;
    display: table-cell;
    margin-top: -1.3em;
    margin-left: -1px;
    border-bottom: 0px;
}
tr{
    width: 100%;
}

table {
    margin-top: 1.3em;
    height:100px;
    display: block;
    overflow: auto;
}

th,td {
    display:inline-block;
    width: 49%;
    margin: 0px;
    padding: 0px;
}