IE6-IE9兼容性问题列表及解决办法_补充之三：Table的Col不再支持style及align，需要到th, td中去设置...

在IE6, IE7时代，如果想隐藏Table中的某一列，可以在Col中设置一个style="display:none"就搞定了，代码如下：

 

              <TABLE >
                <COLGROUP>
                  <COL align="left" width="80"></COL>
                  <COL align="right" width="50" style=”display:none”></COL>
                </COLGROUP>
                <THEAD>
                  <TR>
                    <TH >学生姓名</TH>
                    <TH> 学生编号</TH>
                  </TR>
                </THEAD>
                <TBODY>
                  <TR>
                    <TD >张三</TD>
                    <TD >1</TD>
                  </TR>
                </TBODY>
              </TABLE>

但从IE8某些版本开始就不支持了，IE9也是同样不支持, 具体信息可以参考下面这篇文章：

HE1004: IE8(S) Firefox Chrome Safari 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性http://www.w3help.org/zh-cn/causes/HE1004

在这里引用一下该文对各浏览器col中支持的元素对比表格：

到了IE9，虽然已经不支持col的align和style属性了，但还支持width属性，而在Html5中，col中连width也不支持了，IE10还能支持width，但随着IE对html5支持的不断加强，到了IE11，还能否支持width，就难说了。
因此，笔者建议解决方法就是放弃在colgroup, col中设置样式，转而直接在td, th中设置。

 

即如下面代码所示，在th上设置align, width, style, 在td上只需设置style即可。

          <TABLE >
                <COLGROUP>
                  <COL align="left" width="80"></COL>
                  <COL align="right" width="50" ></COL>
                </COLGROUP>
                <THEAD>
                  <TR>
                    <TH align="left" width="80" >学生姓名</TH>
                    <TH align="right" width="50"  style=”display:none”> 学生编号</TH>
                  </TR>
                </THEAD>
                <TBODY>
                  <TR>
                    <TD >张三</TD>
                    <TD style=”display:none”>1</TD>
                  </TR>
                </TBODY>
              </TABLE>

越来越有一种感觉，IE9，除了名字还叫IE，里面的内容，哈哈，真可以说完全换了。