How to apply different styles based on the number oif col in a table


Tags: html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to create three columns in css

    How do I change the colours of multiple buttons, each into different ones when hovered?

    How to set background color for a boxed link?

    How to get the CSS left, top, width, height from coords?

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How to set the color to the user's link color in CSS?

    How to remove reference of specific CSS files files from View

    how to spread small image file in background and it should scroll with other elements

    How to center this on screen

    How to dynamically remove all unwanted CSS and JS from page

    How do i position a div relative to the window page (responsive css)

    How to add CSS for specific pages in RefineryCMS?

    How to show Div after a Specific time of page load?

    How to position an image of different size using css?

    (Mobile View) How to make UI tabs heading to work as a drop down

    Phonegap : how Control the font size of the Mobile?

    How to have anchors to the side of the page? [closed]

    How to compile sass / scss without creating map files

    How to style a div to be a responsive square? [duplicate]

    How to combine css selectors

    PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?

    How to offset content under a navbar when using height:100%?

    How can I align a text that has a specific width at the center of a div?

    how to make background fit on screen bootstrap3

    How to make parent div above child div without position absolute?

    How to change CSS property in Magnific Popup

    How to remove blue border around the button in Firefox?

    How to add offset border to image of unknown size?

    How do I do rounded corners in CSS in Google Chrome

    How to do taxonomy based css styling using drupal template.php?