【分享】IE中，单元格的colspan属性可能影响TABLE元素的自动布局

[WebAdvocate]

前些日子，发现有同学被表格布局的问题困扰。主要问题是单元格上设置了 colspan属性，有的 td上没设置宽度，导致此 td 计算后的宽度出现浏览器兼容性问题。

代码
具体的例子：

<script type="text/javascript">
   window.onload = function() {
       function $(id) {
           return document.getElementById(id);
       }

       $("info").innerHTML = "red cell clientWidth : " + $("td1").clientWidth +
               "<br/>blue cell clientWidth : " + $("td2").clientWidth +
               "<br/>gold cell clientWidth : " + $("td3").clientWidth;
   }
</script>
<table id="T" style="color:white;" cellpadding="0" cellspacing="0">
   <tr>
       <td id="td1" style="background-color:red;">td1</td>
       <td id="td2" style="background-color:blue; width:100px;">td2</td>
   </tr>
   <tr>
       <td id="td3" style=" background-color:gold; width:300px;" colspan="2">td3</td>
   </tr>
</table>
computed clientWidth:
<div id="info" style="border:1px dashed red; width:300px;"></div>

在上面的代码中，T是一个表格，它的 ”table-layout” 没有设置，这时，会采用默认值’auto’，及自动布局。
表格含两行，两列。其中『cellpadding="0" cellspacing="0"』的设置是为了去除单元格之间padding等对布局的影响。
td2的宽度是100px，td3的宽度是300px，均大于其内容宽度；此设置为了排除内容对宽度的影响，因为在自动布局下，单元格内容大于其设置宽度时，会将单元格撑开。

现在的问题是，究竟 td1 最终的宽度应该是多少？应该是200px吗？

差异
将页面在浏览器中测试一下，在各个浏览器中的表现有所差异：
在 IE 中：

Firefox/Chrome/Safari 中：

在解释这个差异之前，先来看一下标准里是怎么说的。

自动布局表格的宽度计算
在W3C CSS2.1文档中，TABLE元素在自动布局时列的宽度计算规则第3条规定了出现跨越多列单元格是如何处理：
对于跨越多列的单元格，增加这些列的最小宽度，使它们的和至少跟单元格等宽。对于最大宽度也照样处理。如果可能的话，每个扩展到的列增加的宽度应大致相同。

可见，当表格中出现跨越多列的单元格时，它所跨列宽的计算规则：相应的增加所跨列的最小宽度。

虽然如此，但是对增加的方式没有明确说明，只是说，如果可能，所跨列增加的宽度应大致相同。因此，造成了跨列后的列宽计算方式在各浏览器中产生差异。

参考资料，W3C CSS2.1：http://www.w3.org/TR/CSS2/tables.html#auto-table-layout

没有结果的结果
回到刚才的问题上，IE和其他浏览器的计算方案有所差异，其他浏览器都是用td3的宽度减去td2的宽度。IE不知是如何算的宽度值。

怎样解决
只要不让HTML结构触发以上的兼容性问题即可。设置TABLE的“table-layout”特性值为“fixed”，使用固定布局的表格，但这种布局下，宽度不会自适应内容的大小。
也可以将单元格所跨过的列的宽度都设置成‘auto’或者不设置。如此也能有效的规避这个错误。

更多兼容性问题：【分享】浏览器兼容性问题目录

[xiaopoy]

table中的td,乱设width和colspan，可能导致超出行限制，而且这样情况的行长度无法用其他的方法控制，fixed我记得是起不了作用的，LZ确定colspan导致的IE乱塞表格列可以用fixed解决?

[bingdongcaih]

good good good good

[WebAdvocate]

[Quote=引用 10 楼 xiaopoy 的回复:]

table中的td,乱设width和colspan，可能导致超出行限制，而且这样情况的行长度无法用其他的方法控制，fixed我记得是起不了作用的，LZ确定colspan导致的IE乱塞表格列可以用fixed解决?
[/Quote]你说的情况，是另一个IE的问题，它的内容可以把包含块的宽度撑开。
见：【分享】小心，IE中width/height的设定值可能被其内容撑大
只要保证页面运行在标准模式下就行，只有IE6里还有点儿问题。

[aierda]

抢沙发 good

[智星]

好久没有写页面代码了.学习一下.

[star13_hit]

Mark up

[myhope88]

多谢楼主分享

[sumengfeng]

我竟然没有发现这样的问题

[xf6133535]

都不懂·很难耶·

[skyaspnet]

很不错。。。

[lisa022]

很好的东东

[yinhe0376]

新人报道，学习中

[tizll521]

最近表格用的比较多 复杂点的布局 宽度总会出现不可预期的错误 宽度问题一直困扰着我
郁闷哪

[WebAdvocate]

[Quote=引用 32 楼 tizll521 的回复:]

最近表格用的比较多 复杂点的布局 宽度总会出现不可预期的错误 宽度问题一直困扰着我
郁闷哪
[/Quote]建议少用 TABLE 做布局 比较难控制 可读性也不好 改起来也麻烦

[GlyphVectory]

lz: <td id="td3" style=" background-color:gold; width:300px;" colspan="2">td3</td>
为什么还要：定义宽度？
你的colspan是承接上一个tr中的所有td，你把width去掉就OK了

[iseebaby]

很不错。。学习了。。

[binghe2050]

学习了！！！！！！！！！！

[Jamy325]

很好很强大。。

[liangshangjunzi]

学习了

[wangzhong418522]

我也遇到這個問題了，只是在firefox中出現，其他瀏覽器都没問題，於是我用了fiexd，可是用fiexd反而更誇張的變形了，我表格這樣的
<table border="0" width="710px" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td style="float: right;" colspan="2">
<img border="0" src="images/SW05_IMG_0.jpg" width="710px" height="80" alt="" />
</td>
</tr>
<tr>
<td style="float: right" colspan="2">
<table border="0" width="710" id="table2" cellspacing="0" cellpadding="0">
<tr>
<td height="45">
<font size="4" face="微軟正黑體" color="#663300">尚旺人力派遣管理優勢</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<ul style="line-height: 150%;">
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>專人隨同駐廠，現場即時協調</b></font></span>
</li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>定時、隨時員工訪談，問題輔導</b></font><font
face="微軟正黑體" color="#666666"><br />
尚旺特別配置專員一起至企業工作，就近輔導處理員工任何問題，提高員工工作穩定度為企業降低管理風險，強化工作品質。</font></span> </li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>離職追蹤訪談，客觀紀錄檢討</b></font><font
face="微軟正黑體" color="#666666"><br />
當員工離職，尚旺將進行離職員工訪談，詳實記錄員工工作狀況與離職原因，提供企業做為日後管理分析之用。</font></span> </li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>管理網站平台，三方即時互動回報</b></font><font
face="微軟正黑體" color="#666666"><br />
企業各部門主管與員工可以隨時上網進入專屬網頁反應各式問題，尚旺即時處裡溝通回報。</font></span> </li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>內部管理軟體，人員控管調度靈活</b></font><font
face="微軟正黑體" color="#666666"><br />
尚旺管理網站功能強大，包括人員到/離職、勞健保加退、薪資發放、訪談紀錄及宿舍分配等，都能再尚旺管理系統中一貫作業。</font></span> </li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>專業的優勢</b></font><font
face="微軟正黑體" color="#666666"><br />
作業管理獲得國際ISO9001認證。</font></span> </li>
</ul>
</td>
<td style="float: right">
<img border="0" src="images/SW06_IMG_0.jpg" width="350px" height="392" alt="" />
</td>
</tr>
<tr>
<td style="float: right" colspan="2">
<p style="line-height: 150%" align="center">
</td>
</tr>
</table>

在firefox中出現的效果是
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td></td></tr>
</table>
最下面一個是tr是第一個跟上面的td在同一條垂直線上，第二個td則突出在外面！請問我這個是什麼問題啊？