Firefox 中 display为 block 时 tbody 失去宽度

最新推荐文章于 2024-06-17 16:30:49 发布

chelen_jak

最新推荐文章于 2024-06-17 16:30:49 发布

阅读量1.6k

点赞数

分类专栏：实用 CSS

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

CSS

191 篇文章

订阅专栏

本文介绍了解决使用JavaScript动态控制表格显示和隐藏时遇到的问题。当将table的display属性设置为block时，表格边框可能无法正常显示。文章提供了几种解决方案，包括调整display属性值、包裹一层div或设置display为空字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自： http://blog.youkuaiyun.com/xfsnow/article/details/6050787

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

[css]view plaincopy 
   
 table.displayBlock {  
  width: 90%;  
  border:2px solid #999;  
     display:block;  
 }  
 table.displayBlock  td{  
  border:1px solid #fcc;  
 }  

[xhtml]view plaincopy 
   
 <table border="0" cellpadding="0" cellspacing="0" class="displayBlock">  
   <tr>  
     <td>1</td>  
     <td>1</td>  
     <td>1</td>  
     <td>1</td>  
   </tr>  
   <tr>  
     <td>2</td>  
     <td>2</td>  
     <td>2</td>  
     <td>2</td>  
   </tr>  
   <tr>  
     <td>3</td>  
     <td>3</td>  
     <td>3</td>  
     <td>3</td>  
   </tr>  
 </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 属性为空字符串即可。如：

[javascript]view plaincopy 
   
 elem.style.display = '';  

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