【分享】IE中，单元格的colspan属性可能影响TABLE元素的自动布局
前些日子，发现有同学被表格布局的问题困扰。主要问题是单元格上设置了 colspan属性，有的 td上没设置宽度，导致此 td 计算后的宽度出现浏览器兼容性问题。

代码
具体的例子：

HTML code

<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’或者不设置。如此也能有效的规避这个错误。

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


------解决方案--------------------
有同感,以前也遇到这个问题，弄好好久.
------解决方案--------------------
learning......
------解决方案--------------------
又没抢到沙发。。。。。。
------解决方案--------------------
good good good good good
------解决方案--------------------
mark up

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