html - colspan not working in css table -

i'm trying achieve table first column twice long remaining 2 columns. when apply colspan=2 table nothing

code in action

http://jsfiddle.net/us96b/

raw code below

<div class="datagrid">     <table>';         <thead><tr><th colspan="2">header</th><th>header</th><th>header</th></tr></thead>         <tfoot><tr><td colspan="4"><div id="no-paging">&nbsp;</div></tr></tfoot>         <tbody>             <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>             <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>             <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>             <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>             <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>             <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>             <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>         </tbody>     </table> </div> 

the css

.datagrid table {     border-collapse: collapse;     text-align: left;     width: 100%; } .datagrid {     font: normal 12px/150% arial, helvetica, sans-serif;     background: #fff;     overflow: hidden;     border: 1px solid #5492a2;     -webkit-border-radius: 3px;     -moz-border-radius: 3px;     border-radius: 3px; } .datagrid table td, .datagrid table th {     padding: 10px 0px; } .datagrid table thead th {     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #288096), color-stop(1, #288096) );     background:-moz-linear-gradient( center top, #288096 5%, #288096 100% );     filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#288096', endcolorstr='#288096');     background-color:#288096;     color:#ffffff;     font-size: 18px;     font-weight: bold;     border-left: 1px solid #0070a8; } .datagrid table thead th:first-child {     border: none; } .datagrid table tbody td {     color: #d4d2d2;     border-left: 1px solid #d4d2d2;     font-size: 16px;     border-bottom: 1px solid #e1eef4;     font-weight: normal; } .datagrid table tbody td:first-child {     border-left: none; } .datagrid table tbody tr:last-child td {     border-bottom: none; } .datagrid table tfoot td div {     border-top: 1px solid #5492a2;     background: #ffffff; } .datagrid table tfoot td {     padding: 0;     font-size: 18px } .datagrid table tfoot td div {     padding: 0px; } 

it working. since colspaning cannot tell.

here fiddle showing colspan working (the first row in tbody set 4 columns, no spans). if trying achieve "look" of first 2 spanning can adjust widths did in fiddle (50% / 25% / 25%)

http://jsfiddle.net/doitlikejustin/us96b/4/