JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tablesorter table_prop yui">
    <thead>
        <tr>
            <th>SO Number</th>
            <th>LI Number</th>
            <th>Delivery Number</th>
            <th>Status</th>
            <th>Delivery Reason Code</th>
            <th>Open Qty</th>
            <th>Picked Qty</th>
            <th>Shipped Qty</th>
            <th>Total Qty</th>
            <th>Price</th>
            <th>CRD</th>
            <th>MSD</th>
            <th>PDD</th>
            <th>RDD</th>
            <th>RSD</th>
            <th>Hold Status</th>
            <th>Hold Reason Code</th>
            <th>Options</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr 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 name="fmsOrderHeaderList[0].action1">
                    <option value="" selected="selected">Select</option>
                    <option value="1">View/Edit Delivery</option>
                    <option value="CHANGE">change</option>
                    <option value="CN">cancel</option>
                <option value="holdOn">Set Hold On</option>
                </select>
            </td>
            <td>
                <input type="button" value="Add Delivery">
            </td>            
        </tr>
        <tr class="odd">
            <td>FO1848DX</td>
            <td>10</td>
            <td>80</td>
            <td>SC-Scheduled</td>
            <td></td>
            <td>3240</td>
            <td>0</td>
            <td></td>
            <td>3240</td>
            <td>0.0</td>
            <td>18-Jul-2011</td>
     ...

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

/*
    Extends jQuery with a scrollbarTable() function
    height - Desired height to set the rows to.
  */
  (function($){
    $.fn.scrollbarTable=function(height) {
        var obj={};
    
        //Determine type of object passed, assign accordingly.
        switch (typeof(i)){
            case "number":
                obj.height=height;
                break;
            case "object":
                obj=height;
                break;
            case "undefined":
            default:
                obj={height:300};
                break;
        }
        
        //Iterate over each element in `this`
        return this.each(function(){
            var element=$(this);
            
            //Update the width to be the size of the element minus 
            element.width(element.width() - 
            function(width){
                var parent,child;
                if(width===undefined){
                    parent=$('<div><div></div></div>').appendTo('body');
                    child=parent.children();
                    width= (child.innerWidth()) - (child.height(99).innerWidth());
                    parent.remove();
                }
                return width;    
            }());
            var cols=[];
            element.find('tr:first th').each(function(){
                cols.push($(this).width());
            });
            
            var $firstRow=element.clone();
            $firstRow.find('tbody').remove();
            element.find('thead').remove();
            element.before($firstRow);
    
            $firstRow.find('tr:first th,tr:first td').each(function(index){
                $(this).attr('width', cols[index]);
            });
    
            element.find('tr:eq(0) td').each(function(index){
                $(this).attr('width', cols[index]);
            });

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

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

            element.wrap($wrap);
       ...