Question

I have different tables that are similar but the only difference is that they may have different cols.
I want to define a style that if the number of columns is say 2, then the width of first td be 80% and width of second one be 105. If the table has three columns, their width should be 45%, 45% and 10% and so on.

How can I do it in CSS? If it is not possible to do it in CSS, how can I do it in JQuery?

Answer 1

That’s, as far as I know, not doable just with CSS since you need to calculate percentages and detect the number of columns.

I set up a fiddle with a jQuery example, assuming the same number of columns for each row (no colspan used). Here’s how I did it:

var cols       = $('table tr:first td').size(),
    width      = 90 / cols,
    last_width = 10;

$('table td').css('width', width + "%");
$('table tr > td:last-child').css('width', last_width + "%");
​

The vars used are the number of columns, the last column size, and the other columns size (90% of width by number of columns). Then we apply the resulting width to all the cells, and the last column width to the last cell of each row.