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

doitlikejustin · Accepted Answer · 2013-08-08 03:49:23Z

3

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/

answered Aug 8, 2013 at 3:49

doitlikejustin

6,3312 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barnee · Accepted Answer · 2014-03-21 09:26:58Z

3

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>

edited Mar 21, 2014 at 9:26

Barnee

3,4698 gold badges47 silver badges57 bronze badges

answered Aug 8, 2013 at 4:20

Narendra

3,1157 gold badges33 silver badges51 bronze badges

3 Comments

Jukka K. Korpela Over a year ago

The use of colspan is even invalid here: it violates the HTML table model, as one can see by validating the code as HTML5. (HTML5 validation checks such things.)

Narendra Over a year ago

@JukkaK.Korpela I know that this is not valid. But this code os added just to show how colspan can be used to get the desired result.

Paul McCarthy Over a year ago

The examples here use percentages because using actual width in pixels simply does not work as expected. If 1 want my column to be 100 pixels wide I have to change more than 1 line of code to make it happen. i.e. css is badly implemented in this area.

John · Accepted Answer · 2013-08-08 03:49:59Z

1

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

answered Aug 8, 2013 at 3:49

John

16k10 gold badges76 silver badges114 bronze badges

Comments

Thanos · Accepted Answer · 2013-08-08 04:23:30Z

0

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

EXAMPLE

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

answered Aug 8, 2013 at 4:23

Thanos

3,0592 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

Issues with colspan in CSS table

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related