JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tableHeader">
    <colgroup>
        <col class="column1"></col>
        <col class="column2"></col>
        <col class="column3"></col>
        <col class="column4"></col>
        <col class="column5"></col>
    </colgroup>
    <thead>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
            <th>Header5</th>
        </tr>
        <thead>
        </table>
        <div id="tableBody-container">      
    <table id="tableBody">
         <colgroup>
            <col class="column1"></col>
            <col class="column2"></col>
            <col class="column3"></col>
            <col class="column4"></col>
            <col class="column5"></col>
        </colgroup>
        <tbody>
            <tr>
                <td>Val1</td>
                <td>Val2</td>
                <td>Val3</td>
                <td>Val4</td>
                <td>Val5</td>
            </tr>
            <tr>
                <td>Val21</td>
                <td>Val22</td>
                <td>Val23</td>
                <td>Val24</td>
                <td>Val25</td>
            </tr>
            <tr>
                <td>Val31</td>
                <td>Val32</td>
                <td>Val33</td>
                <td>Val34</td>
                <td>Val35</td>
            </tr>
            <tr>
                <td>Val41</td>
                <td>Val42</td>
                <td>Val43</td>
                <td>Val44</td>
                <td>Val45</td>
            </tr>
        <tbody>
    </table>
</div>

CSS

#tableHeader {
    width: 100%;
}

#tableHeader th {
    text-align: left;
}

#tableBody-container {
    height: 50px;
    overflow: auto;
}

#tableBody {
    width: 100%;
}

.column1,
.column2,
.column3,
.column4,
.column5 {
    width: 20%
}

JavaScript

var scrollWidth = $("#tableHeader").width() - $("#tableBody").width();
$("#tableHeader").css("padding-right", scrollWidth);