奇怪的样式导致合并单元格的宽度失效

起因很简单，至少一开始我认为这是个很简单的小玩意，没想到折腾了我整整两天，所以记录下来。

一开始，手上拿到了一套网上搜到的super table可以实现固定表左和表头，刚好我的需求是需要同时实现固定表左、表头、表左相同值自动合并、自定义复杂表头合并。而这个js的一开始就说“colSpan not supported ”，于是决定自己改造一下。

 

表左相同值自动合并比较简单，网上也很多现成的，复杂表头的合并稍微花了点功夫，用递归实现了，不料，在最后收尾的时候出了点问题，如下：

1	2
3	4

利用js把1和2合并其实很简单

table.rows[0].cells[0].colSpan=2;
table.rows[0].cells[1].style.display="none";

结果合并后变成了这样

 

1
3	4

也就是说

3和4的宽度丢失了！他们变得一样了！虽然我在代码中设置了

<td style="width:110px;">3</td>
<td style="width:50px;">4</td>

但是它们不生效，哪怕利用IE8的开发者工具进入后修改它的样式也是一样，设置成1000px都一样

开头认为是由于1的宽度没有设置的原因，于是设置1的宽度为3和4的offsetWidth之和，不行，虽然它们在调试的时候，数值的确是110和50

因此我怀疑是由于隐藏单元个导致offsetWidth表现不一致，接着我弃用了
table.rows[0].cells[1].style.display="none";

改用

table.rows[0].deleteCell(1);问题依然一样

 

最后发现在table中定义了样式width:1px，禁用后，一切正常，IE7、8下均能在动态合并后保持子行的宽度不丢失。

 

问题是解决了，可是原理不懂，特此记录。