Firefox 中 display爲 block 時 tbody 失去寬度

用 JavaScript 動態設置一個表格的顯示和隱藏，先是直接設置此 table 的 display 爲 block，發現整個表格寬度仍維持正常，但各表格行的邊框線不能撐滿了。下面示例在非 IE 瀏覽器中可見問題的效果。

 

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

<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 屬性爲空字符串即可。如：

 

elem.style.display = '';

 

原理是通常設爲空字符串時，此元素會恢復成其原來的 display 屬性值，不用再人爲區分 table 還是 block 了