在`tr`中添加足夠寬的textarea影響`td`寬度的計算？

我有一個DOM結構如下所示：在`tr`中添加足夠寬的textarea影響`td`寬度的計算？

<table class="playlist"> 
    <thead> 
     <tr> 
      <th>TH1</th> 
      <th width="53">TH2</th> 
      <th width="53">TH3</th> 
      <th width="53">TH4</th> 
      <th width="53">TH5</th> 
      <th width="53">TH6</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td>TD1</td> 
      <td>TD2</td> 
      <td>TD3</td> 
      <td>TD4</td> 
      <td>TD5</td> 
      <td>TD6</td> 
     </tr> 

     <tr class="expansion"> 
      <td class="expansion" colspan="6"> 
       <div class="comment_wrapper"> 
        <form> 
         <textarea style="width=482px" class="mini">x</textarea> 
        </form> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table>

相關樣式規則是這樣的：

table { 
    width: 580px; 
    border-bottom: 1px solid #EEE; 
} 

.comment_wrapper { 
height: 270px; 
border: 1px red solid; 
overflow-x: hidden; 
overflow-y: auto; 
} 

.comment_wrapper form textarea { 
height: 70px; 
width: 482px; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
border: 1px red solid; 
}

我的問題是，每當我添加了第二tr，表列的寬度變成一個爛攤子如IE6/7中的以下內容。

enter image description here

當我註釋掉這個tr，列寬恢復。

爲什麼添加tr會影響列寬？我怎樣才能避免這種影響？

PS 我已經重現了的jsfiddle這個問題，這是鏈接：http://jsfiddle.net/7mYY8/1/

來源

2011-12-07 satoru

你還需要支持IE6嗎？ –

@Jared不幸的是，是的。 IE6用戶仍佔我們網站用戶的很大一部分。 – satoru

在FF8中查看它（我無法訪問IE6），我發現第一列比其餘的都寬一些，都是統一的。這是你在追求什麼？爲什麼你不使用類的統一寬度而不是'width'屬性？ –

好了，你有6列5，其中有一個定義的寬度。

第一列沒有。這意味着它必須被計算。當然你有在CSS中定義的表格寬度，但IE 6並不是最好的東西。

最好的辦法就是明確定義所有標題列的寬度。然後爲表格提供「table-layout：fixed」的css屬性。這將強制整個表格的渲染寬度。

來源

2011-12-07 03:44:44 NotMe

在`tr`中添加足夠寬的textarea影響`td`寬度的計算？

回答

相關問題