How to set different table widths using CSS or jQuery?

Question

Our users are using a tool to create HTML content with, I don't have control over the HTML it generates but I do have control over the CSS behind it and I've managed to plugin jQuery as well.

Our design guidelines are that whenever a table is created with two column the width of the first column should be 300px and the second 380px.

When they create a table they have an option from the tool to set the width of each table cell however in order to save this for them I'd like to automatically apply this on the HTML.

Is there a way using CSS rules to set table widths of td1 and td2? I know in CSS I can do something like:

td
{
width: 300px;
}

but that will apply to all TDs.

If that's not possible using CSS I also have jquery plugged in and happy to use it if it's not possible using CSS.

EDIT: I need this solution to work with IE8 and above, old browser but most of our users still use it.

Tushar Gupta - curioustushar · Accepted Answer · 2013-10-01 09:37:55Z

2

Use :nth-child()

table tr td:nth-child(n) { 
    width: 300px;
}

Comments

Anton · Accepted Answer · 2013-10-01 09:36:03Z

1

ie8 doesn't support nth-child to workaround it you can do this

table tr td:first-child + td +td { //gets 3rd td
    width:300px;
}

DEMO

answered Oct 1, 2013 at 9:36

Anton

32.6k5 gold badges47 silver badges54 bronze badges

5 Comments

Joly Over a year ago

Thanks Anton however it seems like it only applies it to the first table on the page and I've got few. Any idea why?

Anton Over a year ago

Only first table, weird seems to work here jsfiddle.net/Alfie/mpHEK/2 with multiple tables @Joly

Joly Over a year ago

Probably something in the way the html is being generated by the tool, I'll keep digging the code it creates, thanks

Joly Over a year ago

I noticed the tables are being created under <p> element, should that make any difference?

Anton Over a year ago

@Joly No, it shouldn't just tested it out

PA. · Accepted Answer · 2013-10-01 09:37:04Z

0

you can do it in CSS and in JQuery

in CSS, you simply use the first-child pseudo-class selector http://www.w3.org/TR/CSS2/selector.html#first-child

   td { width: 380px; }
   td:first-child { width: 300px; }

edited Oct 1, 2013 at 9:37

answered Oct 1, 2013 at 9:32

PA.

29.5k10 gold badges77 silver badges102 bronze badges

2 Comments

Joly Over a year ago

Does this work with IE8? Also how do I do the second child? nth-child(n) doesn't seem to work with IE8 either

PA. Over a year ago

first-child is CSS2 and works with IE8. nth-child is CSS3 and does not. See caniuse.com/css-sel3

Collectives™ on Stack Overflow

How to set different table widths using CSS or jQuery?

3 Answers 3

Comments

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related