JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="1" cellpadding="0" border="0" width="100%" class="tablesorter table_prop yui" id="FMS_Delivery_tbl">
            <thead>
                <tr>
                    <th nowrap="nowrap" class="header">SO Number</th>
                    <th nowrap="nowrap" class="header">LI Number</th>
                    <th nowrap="nowrap" class="header">Delivery Number</th>
                    <th nowrap="nowrap" class="header">Status</th>
                    <th nowrap="nowrap" class="header">Delivery Reason Code</th>
                    <th nowrap="nowrap" class="header">Open Qty</th>
                    <th nowrap="nowrap" class="header">Picked Qty</th>
                    <th nowrap="nowrap" class="header">Shipped Qty</th>
                    <th nowrap="nowrap" class="header">Total Qty</th>
                    <th nowrap="nowrap" class="header">Price</th>
                    <th nowrap="nowrap" class="header">CRD</th>
                    <th nowrap="nowrap" class="header">MSD</th>
                    <th nowrap="nowrap" class="header">PDD</th>
                    <th nowrap="nowrap" class="header">RDD</th>
                    <th nowrap="nowrap" class="header">RSD</th>
                    <th nowrap="nowrap" class="header">Hold Status</th>
                    <th nowrap="nowrap" class="header">Hold Reason Code</th>
                    <th nowrap="nowrap" class="header">Options</th>
                    <th nowrap="nowrap" class="header">&nbsp;</th>
                </tr>
            </thead>
            
            <tbody>


                
                    
                    
                    <input type="hidden" value="FO2180XO" id="fmsOrderHeaderList[0].soNum" name="fmsOrderHeaderList[0].soNum">
                    <input type="hidden" value="1" id="fmsOrderHeaderList[0].liNum" name="fmsOrderHeaderList[0].liNum">
                    <input type="hidden" value="1" id="fmsOrderHeaderList[0].dlvNum" name="fmsOrderHeaderList[0].dlvNum">
             ...

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;
}

JavaScript

(function($){
$.fn.scrollbarTable=function(i){
var o={};
if(typeof(i)=='number')o.height=i;
else if(typeof(i)=='object')o=i;
else if(typeof(i)=='undefined')o={height:300}
return this.each(function(){
var $t=$(this);
var w=$t.width();
$t.width(w-
function(width){
    var parent,child;
    if(width===undefined){
        parent=$('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
        child=parent.children();
        width=child.innerWidth()-child.height(99).innerWidth();parent.remove();
    }
    return width;
}());
var cols=[];
$t.find('tr:first th').each(function(){cols.push($(this).width());});
var $firstRow=$t.clone();
$firstRow.find('tbody').remove();
$t.find('thead').remove();
$t.before($firstRow);

$firstRow.find('tr:first th,tr:first td').each(function(i){$(this).attr('width',cols[i]);});

$t.find('tr:eq(0) td').each(function(i){$(this).attr('width',cols[i]);});

var $wrap=$('<div>');

$wrap.css({width:w,height:o.height,overflow:'auto'});

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