Question

I couldn’t think of a more descriptive title, so I do hope it makes sense (feel free to correct me if I am wrong).

Basically I am adding tables to a site and the columns will automatically resize according to the amount of columns being added.
Adding a single works perfectly well, where it’s getting a bit complicated for me (perhaps over the head) is as soon as I add an additional table on the same page – the script which runs counts all of the columns in their entirety.
For instance, if I add a three column table at the top of the page then and additional three column table at the bottom – the script then counts a total of 6 columns then divides 100 by that number..

Is there a simple way to create a variable or a table count so that the script at the bottom detects separate tables and resizes the columns per table?

Snippets of the code below:

<div class="table<?php echo $tblid; ?>">
        <div class="cols">
        </div>

    ..code going on here..
        <div class="cols">
        </div> 
    ..Some more code going on here..
</div>

    var v = jQuery('.table .cols').length;

    var cw = (100/v);

    jQuery('.table .cols').css('width',cw+'%');

Answer 1

If i am not wrong, youu have two tables with the same classname , so your selector jQuery('.table .cols') gets both the table and jQuery('.table .cols').length; will give you the length of the cols combining both the tables…

what you can do is.
Give them seperate class and call each one..

HTML

 <div class="table1">
    <div class="cols">
    </div>

  ..other code going on here..

</div>

<div class="table2">
    <div class="cols">
    </div>

  ..other code going on here..

</div>

Jquery

jQuery(function(){
  jQuery('div[class^="table"]').each(function(){
    var obj=jQuery(this).find('.cols');
    var v = obj.length;
    var cw = (100/v);

    obj.css('width',cw+'%');
  });
});

this should work for any number of tables..