JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="0" cellpadding="0" border="1" >
  <tr>
    <td id="firstTd"></td>
    <td>
     <div id="divHeader" style="overflow:hidden;width:736px;">
      <table cellspacing="0" cellpadding="0" border="1">
       <tr>
        <td><div class="tableHeader">1 Complex Lot</div></td>
        <td><div class="tableHeader">Component 1</div></td>
        <td><div class="tableHeader">Host</div></td>
        <td><div class="tableHeader">Partcipiant</div></td>
        <td><div class="tableHeader">Host Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
								<td><div class="tableHeader">Partcipiant Price 1</div></td>
        <td><div class="tableHeader">Partcipiant Price 2</div></td>
        <td><div class="tableHeader">Partcipiant Price 3</div></td>
        <td><div class="tableHeader">Partcipiant Price 4</div></td>
       </tr>
      </table>
     </div>
    </td>
    <td><a class="button small green"><i class="icon-plus"></i>Add Lot Component</a></td>
  </tr>
  <tr>
   <td valign="top">
    <div id="firstcol" style="overflow: hidden;height:180px">
     <table width="100" cellspacing="0" cellpadding="0" border="1" >
      <tr>
       <td class="tableFirstCol">Line Item 1</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 2</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 3</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 4</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 5</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 6</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 7</td>
  ...

JavaScript

fnAdjustTable=function(){
  
  var colCount=jQuery('#firstTr>td').length; //get total number of column
  var m=0;
  var n=0;
  var brow='mozilla';
  
  jQuery.each(jQuery.browser, function(i, val) {
    if(val==true){  
      brow=i.toString();
    }
  });
  
  jQuery('.tableHeader').each(function(i){
    if(m<colCount){    
      if(brow=='mozilla'){
        //for adjusting first td
        jQuery('#firstTd').css("width",jQuery('.tableFirstCol').innerWidth());   
        //for assigning width to table Header div
        jQuery(this).css('width',jQuery('#table_div td:eq('+m+')').innerWidth());
      }
      else if(brow=='msie'){
        jQuery('#firstTd').css("width",jQuery('.tableFirstCol').width());   
        //In IE there is difference of 2 px
        jQuery(this).css('width',jQuery('#table_div td:eq('+m+')').width()-2);
      }
      else if(brow=='safari'){
        jQuery('#firstTd').css("width",jQuery('.tableFirstCol').width());      
        jQuery(this).css('width',jQuery('#table_div td:eq('+m+')').width());
      } else {
        jQuery('#firstTd').css("width",jQuery('.tableFirstCol').width());      
        jQuery(this).css('width',jQuery('#table_div td:eq('+m+')').innerWidth());
      }
    }
    m++;
  });
  
  jQuery('.tableFirstCol').each(function(i){
    if(brow=='mozilla'){
      //for providing height using scrollable table column height
      jQuery(this).css('height',jQuery('#table_div td:eq('+colCount*n+')').outerHeight());      
    } else if(brow=='msie'){    
      jQuery(this).css('height',jQuery('#table_div td:eq('+colCount*n+')').innerHeight()-2);
    } else {
      jQuery(this).css('height',jQuery('#table_div td:eq('+colCount*n+')').height());
    }
    n++;
  });    
}

//function to support scrolling of title and first column
fnScroll=function(){
  jQuery('#divHeader').scrollLeft(jQuery('#table_div').scrollLeft());
 ...