Scrolling tables with Jquery, issue with setting the header widths

Question

i have been working on this JS to which allows fixed columns and a header row which is all fine, however the JS that works out and sets the columns widths does not seem to be working and i cannot seem to see why at the moment.

Can anyone run over with a second pair of eyes? the columns are just really tight together and not spaced correctly like they should be oh and the other thing is the fixed right column for some reason is not adjusting in height like the first column does and cannot see why.

Thanks in advance for any help with this as stuck with it:

JSFIDDLE IS HERE: http://jsfiddle.net/JMcDf/

JS CODE:

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

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>
      </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>

Thanks

You really need to remake that table structure, there are several tables inside tables which would only bring pain to anyone that wants to give some style functionality, check this http://jsfiddle.net/JMcDf/1/, the table `complex-lots-table` is the one you want to fix and the only relation it has with the upper table is that it is inside of it, in other words, the new `width` from the headers has 0 effect to the table that contains the data. — G.Mendes, Jan 27 '14 at 17:20
What would you suggest with a fixed header, left column and right column? do you know of any examples of what im trying to get done here? or do you think maybe you could help me with a better solution to what im after as really stuck with this? thanks in advance! — James Brandon, Jan 27 '14 at 17:30
Let's say you want to make the width of the column be a width that is comfortable for the longest cell in that column, the logic behind it would be you loop every row checking the column(x) width (like you did with the header) and store in a var if the column(x) was larger than the previous ones checked, once you're done with that column, set the header(x) and td(x) from all rows with the largest width. About fixed left and right columns, I would suggest to not make that, let them run free together with data. — G.Mendes, Jan 27 '14 at 17:44
Check this answer also http://stackoverflow.com/questions/15811653/table-with-fixed-header-and-column-on-pure-css using jquery plugin datatables — G.Mendes, Jan 27 '14 at 17:45
I got this snippet from a site somewhere, and my js is not that good but ive been trying. do you think you could help me with the js on is in jsfiddle please, if you have time that is? — James Brandon, Jan 27 '14 at 17:58

Scrolling tables with Jquery, issue with setting the header widths

0 Answers0