Menu
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...
967
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+
92
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.
39
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.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
