JSFiddle - React, Tailwind, and code Playground

HTML

<table id="headerRowNew">
      <tr id="newTableHeader"><td></td></tr>
    </table>

    <div id="container">
        <table id="targetTable">
            <tr id="headerRow">
                <td>Really Long Column Name To Show Alignment</td>
                <td>Number</td>
                <td>Age</td>
            </tr>
            <tr>
                <td>John</td>
                <td>2131</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Stacy</td>
                <td>4123</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Chris</td>
                <td>122</td>
                <td>7</td>
            </tr>
            <tr>
                <td>John</td>
                <td>2131</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Stacy</td>
                <td>4123</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Chris</td>
                <td>122</td>
                <td>7</td>
            </tr>
            <tr>
                <td>John</td>
                <td>2131</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Stacy</td>
                <td>4123</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Chris</td>
                <td>122</td>
                <td>7</td>
            </tr>
            <tr>
                <td>John</td>
                <td>2131</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Stacy</td>
                <td>4123</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Chris</td>
                <td>122</td>
                <td>7</td>
            </tr>
        </table>
    </div>

CSS

#container{
 overflow-y: scroll; 
 height: 120px;
}

JavaScript

$(function () {
            var columnWidths = new Array();

            // Get column widths
            $("#headerRow").find('td').each(function (index) {
                columnWidths[index] = $(this).width();
            });

            // get column data for header
            var tableHeaderRow = $("#headerRow").html();

            // clear header
            $("#headerRow").html("");
            // insert header data into new table container
            $("#newTableHeader").html(tableHeaderRow);

            // modify column width for header
            $("#newTableHeader").find('td').each(function (index) {
                $(this).css("width", columnWidths[index]);
            });

            // modify column width for 
            // go to the next row, first row considered header column
            $("#targetTable tr:first").next().find('td').each(function (index) {
                $(this).css("width", columnWidths[index]);
            });
        });