Table rendering with cols and colspan on tds in IE9

问题

I am making HTML-tables to show data, and I have a varying number of columns in the tables, but want to keep the same number of "columns in the background", to have consistent widths of the columns.

The reason for this is specific to my application and is not relevant to the problem, since this seems to be a bug (or have I misunderstood how col's and colgroup's should work?)

In the HTML I show here I have reduced the number of actual columns to two.

I make my tables using a colgroup like this, and setting the width on the col element with CSS:

Table1:

<table>
    <colgroup>
        <col />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td colspan="1">col1</td>
            <td colspan="1">col2</td>
        </tr>
        <tr>
            <td colspan="2">col1</td>
        </tr>
    </tbody>
</table>

Table 2:

<table>
    <colgroup>
        <col />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td colspan="2">col1</td>
        </tr>
        <tr>
            <td colspan="2">col1</td>
        </tr>
    </tbody>
</table>        

CSS:

col {
    width:100px;                
}

Both these tables render fine in FireFox, Chrome, IE7 and IE8 (where 'IE' stands for 'Internet Explorer'). In IE9, however, Table 2 is rendered with the width of just one column.

I've tried both with and without table-layout: fixed

I have made a fiddle with these tables, and also the tables with all whitespace removed, to illustrate that this is not related to that table rendering bug in IE9: http://jsfiddle.net/ketnp/1/

来源：https://stackoverflow.com/questions/14236408/table-rendering-with-cols-and-colspan-on-tds-in-ie9