10
2012
09

display为 block 时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 属性为空字符串即可。如:

elem.style.display = '';  

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

« 上一篇 下一篇 »