Setting width of <td> elements when creating table dynamically in JavaScript

[dgotlib]

I need to create tables dynamically in Javascript, with column widths of 20%, 55%, 15%, 10%.
I can't figure out how to make this work.
I created css classes for each of the four columns.
My css style sheet which, in part, looks like:

table{
font-family: Arial;
text-align: left;
border-collapse:collapse;
table-layout:fixed;
}
.col1{width:20%;}
}
.col2{width:55%;}
}
.col3{width:15%;}
}
.col4{width:10%;}
}

.current_goals
{border: thin solid black;
border-collapse:collapse;
text-align: left;
width: 100%;
border:1px;
cellpadding:1px;
cellspacing:1px;
contenteditable:"true";
}

The Javascript function I wrote creates the following table:

<table id="risknew0" class="current_goals">
<tbody>
<tr>
<td class="col1">&nbsp;</td>
<td class="col2">&nbsp;</td>
<td class="col3">&nbsp;</td>
<td class="col4">&nbsp;</td><
/tr>
</tbody>
</table>

but the table so created
does not follow the width instructions specified.

Is there something wrong with my syntax?
Or is there another way, when creating a table in Javascript,
to specify the width of the columns
(well, cells, because I am not using <col>).
Thanks muchly.
David

[acoder]

First of all, check that the CSS rules are correct and work as expected.

[dgotlib]

The rules work fine.