How to apply different styles based on the number oif col in a table
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?
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.