IE8标准模式table-layout:fixed隐藏列宽度自动调整

在IE8浏览器的标准模式下,样式设置为table-layout:fixed的表格中的列隐藏之后,表格的宽度并不会自动resize,table中各th, td元素宽度保持不变。

而在IE7,以及chrome、firefox等现代浏览器中,表格中各列的宽度会自动重新调整。

一个简单的针对IE8浏览器的问题解决方案如下:

table.style.display = "inline-table";
window.setTimeout(function(){table.style.display = "";},0);

如果使用jQuery,可以通过下面的方式判断当前浏览器是否为IE8:

jQuery.browser.version == 8.0

效果参见下面的表格示例:

Column1 Column2 Column3 Column4 Column5 Column6
Data1 Data2 Data3 Data4 Data5 Data6
Data1 Data2 Data3 Data4 Data5 Data6
Data1 Data2 Data3 Data4 Data5 Data6
Data1 Data2 Data3 Data4 Data5 Data6
Data1 Data2 Data3 Data4 Data5 Data6

参考StackOverflow问答:
http://stackoverflow.com/questions/2654103/ie8-isnt-resizing-tbody-or-thead-when-a-column-is-hidden-in-a-table-with-table

以及博文:
http://srikanthgade.blogspot.com/2010/09/ie8-standards-table-layout-fixed.html

本文链接:http://bookshadow.com/weblog/2015/10/15/ie8-standards-table-layout-fixed/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码

Pingbacks已关闭。

暂无评论

张贴您的评论