JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Headers">
<table class="NewHeader">
    <tr>
    </tr>
</table>
</div>
<div class="Table">
    <table class="MyTable">
    <tr>
        <th>
            g
        </th>
        <th>
            h
        </th>
    </tr>
    <tr>
        <td>
            test 1
        </td>
        <td>
            test 2 longer
        </td>
    </tr>
        <tr>
        <td>
            test 1
        </td>
        <td>
            test 2 longer
        </td>
    </tr>
        <tr>
        <td>
            test 1
        </td>
        <td>
            test 2 longer
        </td>
    </tr>
        <tr>
        <td>
            test 1
        </td>
        <td>
            test 2 longer
        </td>
    </tr>
        <tr>
        <td>
            test 1
        </td>
        <td>
            test 2 longer
        </td>
    </tr>
        <tr>
        <td>
            test 1
        </td>
        <td>
            test 2 longer
        </td>
    </tr>
        <tr>
        <td>
            test 1
        </td>
        <td>
            test 2 longer
        </td>
    </tr>
</table>
</div>

CSS

.Headers{
    background-color:#456789;
}

.Table{
    background-color:#999;
    height: 100px;
    overflow:auto;
}

JavaScript

$(document).ready(function(){
    var counter = 0;
    $(".MyTable th").each(function(){
        var width = $('.MyTable tr:last td:eq(' + counter + ')').width();
        $(".NewHeader tr").append(this);
        this.width = width;
        counter++;
    });
});