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，裡面的內容，哈哈，真可以說完全換了。