IE10 table-layout:fixed broken if colspan is used

问题

The following HTML renders perfectly in all common browsers including IE7-9 but fails in IE10. Even when running IE10 in compatibility mode, it fails.

<html>
    <body>
        <table style="table-layout:fixed;width:500px">
        <colgroup>
            <col style="width:100px" ></col>
            <col ></col>
            <col style="width:100px" ></col>
            <col ></col>
        </colgroup>
        <tbody>
            <tr>
                <td colspan="2">
                    <div style="background:red;"> red </div>
                </td>
                <td colspan="2">
                    <div style="background:green;"> green </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

While in all other browsers the 2 cells are equal in size, on IE10 (at least when running on Windows7) the first cell is wider than the second.

This HTML in IE 9/Windows 7:

Same HTML in IE 10/Windows 7:

Testpage: http://www.dinkypage.com/167605

Reported Bug: https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly

Does anyone know solution/workaround for this problem?

UPDATE: I asked Microsoft to re-open my reported bug because it's a violation of the w3c standard. The answer is:

"The issue you are reporting is by design. Internet Explorer only uses the first set of TD tags to set the width for a column.".

The w3c standard (http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout) says:

In the fixed table layout algorithm, the width of each column is determined as follows:

A column element with a value other than 'auto' for the 'width' property sets the width for that column.

Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.

Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

That means, this function is broken by design in IE 10. I recommend to use a different browser or stay with IE 9...

回答1:

My current workaround is the following style:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  table colgroup { display: table-row; }
  table colgroup col { display: table-cell; }
}

This makes the browser handle colgroup/col like tr/td and is similar to Teemu's suggestion (but without ugly html hacks). The media selector makes the css only visible to IE10+

回答2:

I ran into this, in IE9 actually. The only solution I found was, indeed, to put in a hidden dummy first row in the table:

<tr style="visibility: hidden"><td></td><td></td><td></td><td></td></tr>

Then, to get rid of the resulting gap, I apply a negative margin-top to the entire table. Not elegant, but it seems to get the job done.

回答3:

I usually make like this

<colgroup width="100%"> // for table a whole
    <col width="50%">   // for each column
    <col width="50%">
</colgroup>

50% for 2 columns, 33% for 3, etc.

This worked for IE10.

来源：https://stackoverflow.com/questions/15275199/ie10-table-layoutfixed-broken-if-colspan-is-used

标签

html

html-table

internet-explorer-10