JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="1" cellpadding="0" border="0" class="tablesorter table_prop yui" id="FMS_Delivery_tbl">
    <thead>
        <tr>
            <th  class="header">SO Number</th>
            <th  class="header">LI Number</th>
            <th  class="header">Delivery Number</th>
            <th  class="header">Status</th>
            <th  class="header">Delivery Reason Code</th>
            <th  class="header">Open Qty</th>
            <th  class="header">Picked Qty</th>
            <th  class="header">Shipped Qty</th>
            <th  class="header">Total Qty</th>
            <th  class="header">Price</th>
            <th  class="header">CRD</th>
            <th  class="header">MSD</th>
            <th  class="header">PDD</th>
            <th  class="header">RDD</th>
            <th  class="header">RSD</th>
            <th  class="header">Hold Status</th>
            <th  class="header">Hold Reason Code</th>
            <th  class="header">Options</th>
            <th  class="header">&nbsp;</th>
        </tr>
    </thead>
    
    <tbody>
        
        
        <tr id="fmsOrderHeaderList[0]" class="even">
            
            <td >
                FO2180XO</td>
            <td >
                1</td>
            <td >
                1</td>
            
            
            <td >OP-Open</td>
            
            
            
            
            
            
            <td >SA</td>
            <td >200</td>
            <td >0</td>
            <td ></td>
            <td >200</td>
            <td >0.0</td>
            <td >15-Jul-2011</td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            
            
            <td >  </td>
            
            
            
            
            
            <td >  </td>
            
            
            <td >
                <select onchange="JavaScript:saveFmsInlineOption('FO2180XO','1','1')" title="option_value"...

CSS

table.yui {
    border: 1px solid #BBCCDD;
    border-collapse: collapse;
    font-family: tahoma,verdana,arial;
    font-size: 1em;
}
table.yui .even {
    background-color: #FFFFFF;
}
table.yui .odd {
    background-color: #EDF5FF;
}
table.yui td {
    border-right: 1px solid #BBCCDD;
    padding: 2px;
}
table.yui th {
    background-color: #C6DEFF;
    background-position: right center;
    background-repeat: no-repeat;
    border: 1px solid #8CB2E7;
    cursor: pointer;
    padding: 3px 2px;
    text-align: center;
    vertical-align: bottom;
}


div.scrollableTable
{
    height: 300px;
    overflow: auto;
}

div.scrollableTable table
{
    table-layout: fixed;
}

div.scrollableTable table.headerTable
{
    position: absolute;
}

div.scrollableTable table.dataTable thead
{
    visibility: hidden;
}

JavaScript

(function($) {
    $.fn.scrollbarTable = function(i) {
        var scrollableTable = $(this);
        var colGroup = $("<colgroup />");
        scrollableTable.find("thead tr").first().children("th").each(function() {
            colGroup.append($("<col />").css("width", ($(this).width() + 6) + "px")); // 6 is padding left(2) + right(2) + border width left(1) + right(1)
        });
        colGroup.children("col:last-child").css("width", "");
        scrollableTable.prepend(colGroup).wrap("<div class='scrollableTable'></div>");
        var tableWrapper = scrollableTable.parent();
        var headerTable = scrollableTable.clone().attr("id", "");
        scrollableTable.addClass("dataTable");
        headerTable.addClass("headerTable").css("width", (scrollableTable.width() +2) + "px") //2 for the left & right border ?
            .children("tbody").remove();        
        tableWrapper.prepend(headerTable).width(scrollableTable.width() + 19); // 19 for the scroll bar


    };
}(jQuery));

$(document).ready(function() {
    $('#FMS_Delivery_tbl').scrollbarTable();
});