JSFiddle - React, Tailwind, and code Playground

by TheBanana

HTML

<table class="the_Table">
    <tr class="static_header">
        <th>Head1</th>
        <th>Head2</th>
        <th>Head2</th>
        <th>Head3</th>
    </tr>
</table>
<div id='result' class="scrollable">
    <table class="the_Table">
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
    </table>
</div>

CSS

.the_Table {
    width:300px;
    text-align:center;
}
.scrollable {
    position:relative;
    overflow:scroll;
    height:115px;
    width:330px;
}