动态缩减table列时，table宽度自适应，tr下不同td数改变td的colspan属性值（IE8兼容）

场景说明：              

1，当table的展示列很多时，往往希望用户可以动态设置显示或者隐藏部分列。

2，数据是一次性加载完，只是在页面端控制table的隐藏和显示。

3，当你隐藏某一列时，ie8下table不会自适应宽度，会随着列的减少而宽度缩小。

4，当tr是分组行时，展开的下一个tr可能只有一个td,这个时候会发现，两个tr格式不对称（colspan属性）你再次隐藏某一列时，会发现错误格式更明显。

解决方案：

1，列名的显隐，我是通过select选框控制的。下拉框的选项为一个个的checkbox。

2，ie8宽度的自适用问题：

加样式：<table id="tableAlarmWaitFix"   style="table-layout: fixed; width: 100%;word-break:break-all;">

ie8兼容：列名隐藏js后添加$('#tableAlarmWaitFix').css("display","inline-table");
              window.setTimeout(function(){$('#tableAlarmWaitFix').css("display","");},0);

3，展开tr后样式问题：

//针对点击“+”图标，table列回缩的情况
function clickTableChange(){
    var checkednum =$("input[type='checkbox']:checked").length+3;
    //ie8会默认每个td都有colspan属性，且值为1。但谷歌和火狐不会($("td[colspan]").length的获取值不一样)。
    var mb = myBrowser();
    if ("IE" == mb) {
         $("#tableAlarmWaitFix").find("tr").each(function(){
             if($(this).find("td").length==1){
                 $(this).find("td").attr("colspan",checkednum);
             };
         });
    }else{
        $("td[colspan]").attr("colspan",checkednum);
    }
}
function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
};

上述js代码的作用就是为了保证tr的宽度一致（如果显示列有8项，展开的tr中只有一项（colspan=8），当你隐藏列后，显示列就只有7项了，但展开项的colspan还是8）