Javascript 使用Jquery滚动表格，设置标题宽度时出现问题

我一直在研究这个JS，它允许固定列和一个标题行，这一切都很好，但是，JS的工作，并设置列宽似乎不工作，我似乎不明白为什么在目前

有人能用第二双眼睛跑过去吗？这些柱子紧密地连在一起，没有正确地隔开，就像它们应该的那样。哦，另一件事是，由于某种原因，固定的右边的柱子没有像第一根柱子那样调整高度，也看不出原因

提前感谢您对此的任何帮助，因为您一直在坚持：

JSFIDLE在这里：

JS代码：

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());
  jQuery('#firstcol').scrollTop(jQuery('#table_div').scrollTop());
        jQuery('#lastcol').scrollTop(jQuery('#table_div').scrollTop());
}

jQuery(document).ready(function(){
  fnAdjustTable();
});

fnAdjustTable=函数（）{
var colCount=jQuery（'#firstTr>td'）.length；//获取列的总数
var m=0；
var n=0；
var brow='mozilla'；
每个（jQuery.browser，函数（i，val）{
如果（val==true）{
brow=i.toString（）；
}
});
jQuery（'.tableHeader'）。每个（函数（i）{
如果（mYou确实需要重新构建该表结构，表中有几个表，这只会给任何想要提供某种风格功能的人带来痛苦，请检查此项，表
复杂批次表
是您想要修复的表，它与上表的唯一关系是它在其中，换句话说，t标题中新的
width
对包含数据的表没有影响。对于固定标题、左栏和右栏，您有什么建议？您知道我在这里尝试做什么的例子吗？或者您认为您可以帮助我找到一个更好的解决方案来解决我所追求的问题，因为我真的无法解决这个问题吗？感谢广告vance！假设您希望使列的宽度适合该列中最长的单元格，其背后的逻辑是您循环每一行检查列（x）的宽度（就像您对标题所做的那样），如果列（x）为大于之前选中的值，一旦处理完该列，设置标题（x）和td（x）关于固定的左栏和右栏，我建议不要这样做，让它们与数据一起自由运行。同样使用jquery插件DataTables检查这个答案我从某个网站上获得了这个片段，我的js不是很好，但我一直在尝试。你认为你能帮我处理js上的js吗如果你有时间的话，那是什么？
<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>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 8</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 9</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 10</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 11</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 12</td>
      </tr>
      <tr>
        <td class="tableFirstCol">Line Item 13</td>
      </tr>
     </table>
    </div>
   </td>

    <td valign="top">
      <div id="table_div" style="overflow: scroll;width:736px;height:200px;position:relative" onscroll="fnScroll()" >
        <table width="736" cellspacing="0" cellpadding="0" border="1" class="complex-lots-table">
          <tr id="firstTr">
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter InfoEnter Info  Enter InfoEnter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter InfoEnter Info  Enter InfoEnter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
        </table>
      </div>
    </td>
    <td>
        <div id="lastcol" style="overflow: hidden;height:180px">
     <table width="100" cellspacing="0" cellpadding="0" border="1" >
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
        <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
     </table>
    </div>
    </td>
  </tr>
</table>