星期二, 2月 03, 2015

[jQuery API] IE8 隱藏column後表格寬度異常解決方法

昨天遇到ie8在表格的column隱藏時,表格的寬度未自動變動的問題。
慘況如下圖記念擷圖


找到這個作者的解法,透過變動display的屬性成inline-talbe,再透過setTimeout再把dispaly重設,表格的寬度就會正常了。




http://srikanthgade.blogspot.tw/2010/09/ie8-standards-table-layout-fixed.html

"table-layout:fixed;" is used on tables for performance reasons. While hiding a column, remaining columns width automatically adjusts to table width in all browsers but not inIE8 Standards Mode. In IE8 standards mode table width shrinks. This can be observed in below table by clicking on Hide Column.
Solution: While hiding the column switch table display property between inline-table to default one.
Code:
table1.style.display = "inline-table";
window.setTimeout(function(){table1.style.display = "";},0);



jquery的方法



    $("#目標表格").css('display','inline-table');

            
            var resetTableTimer = 
            window.setTimeout(function(){

                clearTimeout(resetTableTimer);//記得殺掉timer
                        
               $("#目標表格").css('display','');

                        
            },0);


沒有留言:

張貼留言

留個話吧:)