CODEWITHSUNDEEP
htmlcsshtml-table
Julian
Julian

Reputation: 1831

Issues with colspan in CSS table

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;
}

Upvotes: 3

Views: 15345

Answers (4)

Narendra
Narendra

Reputation: 3117

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>

Upvotes: 3

Thanos
Thanos

Reputation: 3059

I have updated your fiddle and it is working as intended now.

EXAMPLE

.datagrid table thead th:first-child {
    border: none;
    width:50%;
}

Upvotes: 0

John
John

Reputation: 16007

What about specifying width="50%" in the first <th> and width="25%" in the other two? No need for colspan at all.

Upvotes: 1

doitlikejustin
doitlikejustin

Reputation: 6353

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/

Upvotes: 3

Related Questions