Table multiple column widths

Question

Here's the code:

<table>
<col style="width:10px"><col style="width:20px"><col style="width:30px">
<td>
....

which defines three columns of different widths. Is there any way to define CSS layout for whole table - all 3 columns - in one single entry, so that I can write:

<table class="cols3">
...

and this cols3 class define that this table has 3 columns of predefined width?

Answer 1

You can use the nth-child selector on the child columns, so your css might look like this:

.cols3 col:nth-child(1){width:10px;}
.cols3 col:nth-child(2){width:20px;}
.cols3 col:nth-child(3){width:30px;}

Be aware that with the nth-child selector, 1 is what is used to get the first child element, not the typical 0.

Answer 2

In your case with 3 columns try using CSS selectors:

table.cols3 col:first-child{
 /* style for first*/
}

table.cols3:last-child{
/*style of last child (3rd column)*/
}

table.cols3 {
/*style for middle columns)*/
}

for more selectors (and examples) check here