javascript - Create a table dynamically with fixed col width in IE7 -

i create table dynamically js table-layout , width both fixed. , set columns' width fixed value in pixels. created table not rendered according intention in ie7.it seems width property in col doesn't work. works both in ff , chrome.

the created table following dom structure:

<table id="dynamictable" cellspacing="0" width="282px" style="table-layout: fixed; overflow: hidden;">     <colgroup>         <col width="129px">         <col width="76px">         <col width="76px">     </colgroup>     <tbody>         <tr><td>head1-1</td><td>head1-2</td><td>head1-3</td></tr>         <tr><td colspan="2">head2-1,2</td><td>head2-3</td></tr>         <tr><td>head3-1</td><td>head3-2</td><td>head3-3</td></tr>      </tbody> </table> 

and css:

table {     border-style: solid solid none none;     border-width: 1px;     border-color: #c0c0c0; } td {     border-style: none none solid solid;     border-width: 0 0 5px 5px;     border-color: #000 #000 #c0c0c0 #c0c0c0;     padding: 10px;     margin: 0; } #dynamictable {     background-color: #eee; } 

demo

html in jsbin

can explain behavior in ie7?