繃能見度導致<thead>細胞重新大小，儘管被固定在寬度

小提琴演示這裏可用的：http://jsfiddle.net/r9MCW/5/繃能見度導致<thead>細胞重新大小，儘管被固定在寬度

的功能

基本上，我有一個很簡單的表<thead>和兩行（共3個）。單擊第2行切換的內容能見度3行，像這樣：

<table width="100%" border="1" cellpadding="0" cellspacing="0"> 
<thead> 
    <tr> 
     <th style="width:60px;">A</th> 
     <th style="width:50px;">B</th> 
     <th style="width:40px;">C</th> 
     <th style="width:30px;">D</th> 
    </tr> 
</thead> 
<tr class="clickme"> 
    <td colspan="4">Click Me!</td> 
</tr>   
<tr> 
    <td colspan="4"> 
     <div class="target"> 
      Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet [...] 
     </div> 
    </td> 
</tr> 
</table>

點擊<tr class="clickme">顯示/隱藏<div class="target">使用一些非常簡單的jQuery的toggle()功能。

問題

IE7，IE8和IE9都重新大小的<th>寬度每次切換運行時間。看小提琴。我怎樣才能阻止這種情況發生？

來源

2011-06-22 Jay

這是因爲你的TH寬度並不等於表的實際100％寬度。

有2種方式，你可以去了解這一點：

變化TH寬度的百分比，讓他們起來
更改表寬度爲100％，以一組像素寬度，使TH寬度增加最高達到

來源

2011-06-22 09:35:07

將表格寬度設置爲一個固定的px值（TH寬度總和）並不能解決問題，但將TH寬度更改爲百分比。很奇怪。 – Jay

您也可以設置'target'div的寬度以匹配標題的總數。 IE看起來正確地選擇了比例。 http://jsfiddle.net/r9MCW/38/ –

良好的通話，謝謝。 – Jay

當您使用像素大小時，它只是一個建議和最小值。當桌子寬於180px時，它會以任何合適的方式分配額外的空間。

如果您想要指定寬度，則單元格的寬度必須合計爲表的寬度。當你在餐桌上的widht使用％，你必須對細胞也的寬度使用百分比：

http://jsfiddle.net/r9MCW/13/

來源

2011-06-22 09:42:43 Guffa

似乎內容td標籤的同時，即切換改變寬度。給這個td一個穩定的值（例如100％）將解決這個問題。

<td width="100%" colspan="4"> 
     <div class="target"> 
      Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet [...] 
     </div> 
</td>

來源

2011-06-22 09:47:56

繃能見度導致<thead>細胞重新大小，儘管被固定在寬度

回答

相關問題