Sencha Touch设置一个table样式时，tbody的宽度只有table的一半

文章出处：http://blog.csdn.net/lisliefor/article/details/6694812

最近，在一个页面控制两个table切换显示的时候，碰到了类似的问题，在Firefox的firebug插件下查看html元素，发现table的长度明明是100%，但是tbody的长度只有table的1/2，没有撑开到最大，为此苦恼不已，庆幸找到这篇blog，我他提供的方法，设置display属性为""，解决问题，并且在IE8和FF5中测试通过，以下是他的博客原文：

    用 JavaScript 动态设置一个表格的显示和隐藏，先是直接设置此 table 的 display 为 block，发现整个表格宽度仍维持正常，但各表格行的边框线不能撑满了。下面示例在非 IE 浏览器中可见问题的效果。

[html]  view plain copy print ?

1. table.displayBlock {    
2.  width: 90%;    
3.  border:2px solid #999;    
4.     display:block;    
5. }    
6. table.displayBlock  td{    
7.  border:1px solid #fcc;    
8. }    

[html]  view plain copy print ?

1. <table border="0" cellpadding="0" cellspacing="0" class="displayBlock">    
2.   <tr>    
3.     <td>1</td>    
4.     <td>1</td>    
5.     <td>1</td>    
6.     <td>1</td>    
7.   </tr>    
8.   <tr>    
9.     <td>2</td>    
10.     <td>2</td>    
11.     <td>2</td>    
12.     <td>2</td>    
13.   </tr>    
14.   <tr>    
15.     <td>3</td>    
16.     <td>3</td>    
17.     <td>3</td>    
18.     <td>3</td>    
19.   </tr>    
20. </table>    

    原因是当 table 的 display 为 block 时，不论是否在 HTML 里显式地写了 tbody 标签，Firefox 解析出的 tbody 都不再和 table 等宽，而是适应表格行的宽度。

解决：

    要使 tbody 宽度正常，必须设置 display:table。或者更通用的变通是用 JavaScript 控制表格的显示隐藏时不直接调协此 table 的 display 属性，而是给 table 包裹一层 div，然后设置该 div 的display 属性为 block 或 none。

 

更简单的解决：

    后来看 John Resig 的《Pro JavaScript Techniques》又学了一招更简单的处理，不用给 table 外包括 div 了，只要在恢复显示时设置 display 属性为空字符串即可。如：

[html]  view plain copy print ?

1.   

[html]  view plain copy print ?

1. elem.style.display = '';    

    原理是通常设为空字符串时，此元素会恢复成其原来的 display 属性值，不用再人为区分 table 还是 block 了

    我采用了最后一种办法。