Set width of td depending on No of td using jquery

jquery html-table width

14,647

To get the number of columns:

var num = $("#table > tr > td").length;

To specify the width:

$("#table > tr > td").width(w + "px");

I hope this was what you were looking for

Edit:

To specify the width to a specific column:

//if you've specified an id to each td

$("#td1").width(td1Width+"px");

//if you just use classes to identify them

$("td.td1", "#table1").width(td1Width+"px");

I would also recommend you to look into find() and end() to select columns in an efficient way. since making a $() call is a more expensive operation:

$("#table1").find("#td1").width(td1Width+"px").end().find("#td2")...

Edit 2

try this instead

$("table > tr > td:eq(0)").css("width", "50%");

or even better

$("table > tr > td").eq(0).css("width", "50%").end()
                    .eq(1).css(...etc;

"table" will select all tables on the page; use id or class to identify which table you require.

Edit 3 (final!!)

Ok, now i can see all the code i can give a better answer. try this:

var num;
var $tds;
$("table").each(function(i, t) {
   $tds = $("td", t);
   num = $tds.length;

   if (num % 4 == 0) {
        $tds.eq(0).css("width", "50%").end()
            .eq(1).css("width", "30%").end()
            .eq(2).css("width", "10%").end()
            .eq(3).css("width", "10%");
    }
    if (num % 3 == 0) {
        //etc
    }
});

I hope this is a better answer :)

14,647

Author by

Amra

Updated on June 05, 2022

Comments

Amra almost 2 years

I have several web pages with different amount of tables with different amount of columns.

I was looking on the net for a jquery spinet which gets the number of columns of the table and depending on the number of columns will define the width of each column.

Ex.

  if (noOfTdOnTable == 2) {
     tdWidth = "50%";
    }
    if (noOfTdOnTable == 3) {
      td1Width = "40%";
      td2Width = "40%";
      td3Width = "20%";
    }
    if (noOfTdOnTable == 4) {
      td1Width = "35%";
      td2Width = "25%";
      td3Width = "15%";
      td4Width = "15%";
    }

Update

Using the only answer I was given I have this at the moment but only works when there is one table on the page and I could not figure out how to apply when there are two columns.

        var num = $("table > td").length;


    if (num % 4 == 0) {
        $("table  > td:eq(0)").css("width", "50%");
        $("table > td:eq(1)").css("width", "30%");
        $("table > td:eq(2)").css("width", "10%");
        $("table > td:eq(3)").css("width", "10%");
    }
    if (num % 3 == 0) {
        $("table > td:eq(0)").css("width", "50%");
        $("table > td:eq(1)").css("width", "40%");
        $("table > td:eq(2)").css("width", "10%");
    }

This is an example of the html, but the code will apply to lots of pages with different No of Tables but all tables will have either 2,3 or 4 columns.

<html>    
    <table>
           <tr>
               <td>text</td>
               <td>text</td>
               <td>text</td>
          </tr>
    </table>

    <table>
           <tr>
               <td>text</td>
               <td>text</td>
          </tr>
    </table>

    <table>
           <tr>
               <td>text</td>
               <td>text</td>
               <td>text</td>
               <td>text</td>
          </tr>
    </table>
</html>

Reigel Gallarde over 13 years

there would be a problem if there's rowspan
Amra over 13 years

@Mouhannad: Thanks for your answer. To set the width of the td, wouldn't that set the same width to all tds?
Amra over 13 years

That is not working for me as it gets all tds on table and set same width for all td. But thanks anyway.
Mouhannad over 13 years

yes it would. i couldn't make it a more specific answer since you didn't share your html. so because i don't know your html structure i just made a general code. check my edit
Amra over 13 years

@Mouhannad: Sorry you are right I did not put the html, the problem is that the code is generic to apply to several pages and they can have several tables or one, therefore I am not using classes or id I just need to go through each table, find the No of columns on the table and set the width of the columns for each table depending on the No of Columns. Thanks.
Amra over 13 years

@Mouhannad:I like your Edit2 but for some reason can't get it to work.
Amra over 13 years

@Mouhannad:There is a small problem, which is, How can I figure out how many columns does the table have? Thanks a lot for your effort.
Amra over 13 years

@Mouhannad: Great! thanks a lot + 1 and Accepted solution :-).