Issues with colspan in CSS table

Question

I'm trying to achieve a table where the first column is twice as long as the remaining two columns. When I apply colspan=2 to the table it does 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;
}

Answer 1

It actually is working. But since they ALL are colspaning you cannot tell.

Here is my fiddle showing you that the colspan is working (the first row in tbody I set to 4 columns, with no spans). If you are trying to achieve to "look" of the first 2 spanning together you can adjust the widths like I did in my Fiddle (50% / 25% / 25%)

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

Answer 2

colspan is not used to specify the width of columns as you did. This is used to show particular cell spanned into multiple columns. But in your case colspan should not be used. Instead you can use width as 50% for 1st column and 25% for other two cols.

But if you want to use colspan, the following way will work.

<div class="datagrid">
    <table>
        <thead>
            <tr>
                <th colspan="2" width="25%">header</th>
                <th width="25%"></th>
                <th>header</th>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
        </tbody>
    </table>
</div>