IE10 table-layout:fixed broken if colspan is used

2019-06-16 05:16发布

站内问答 / 前端开发
1785 3 5

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:

In IE 9

Same HTML in IE 10/Windows 7:

In IE 10

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:

  1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.
  2. 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.
  3. 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...

3条回答
姐就是有狂的资本
2楼-- · 2019-06-16 05:58

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+

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
3楼-- · 2019-06-16 05:59

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.

查看更多
0人赞 添加讨论(0) 举报
淡お忘
4楼-- · 2019-06-16 06:08

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)