（转摘）表格Table自动拉伸的解决

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

 

<script type="text/javascript">

   window.onload = function() {

       function $(id) {

           return document.getElementById(id);

       }

  

       $("info").innerHTML = "red cell clientWidth : " + $("td1").clientWidth +

               "blue cell clientWidth : " + $("td2").clientWidth +

               "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吗？

自动布局表格的宽度计算
在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’或者不设置。如此也能有效的规避这个错误。