2012-05-29 96 views
1

我正在處理Internet Explorer 7中的問題。根據表格內的寬度增加div寬度

我想讓容器div足夠寬,以便長表適合它。我現在得到的是一個寬度根據窗口大小和表格溢出這個div的div。

這是我的代碼,我希望我已經在給出的​​解釋中清楚。謝謝!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
<div style="border:1px solid red; width:100%; table-layout: fixed;"> 
<table border="1"> 
    <tbody> 
    <tr> 
     <td> 
     <textarea wrap="OFF" tabindex="166" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="167" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="168" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="169" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="170" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="171" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="172" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="173" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="174" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="175" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="176" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="177" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="178" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="179" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="180" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="181" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="182" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="183" cols="11" rows="4" name="cell"></textarea> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <textarea wrap="OFF" tabindex="184" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="185" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="186" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="187" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="188" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="189" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="190" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="191" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="192" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="193" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="194" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="195" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="196" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="197" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="198" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="199" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="200" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="201" cols="11" rows="4" name="cell"></textarea> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <textarea wrap="OFF" tabindex="202" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="203" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="204" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="205" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="206" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="207" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="208" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="209" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="210" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="211" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="212" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="213" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="214" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="215" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="216" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="217" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="218" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="219" cols="11" rows="4" name="cell"></textarea> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <textarea wrap="OFF" tabindex="220" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="221" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="222" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="223" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="224" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="225" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="226" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="227" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="228" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="229" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="230" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="231" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="232" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="233" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="234" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="235" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="236" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="237" cols="11" rows="4" name="cell"></textarea> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <textarea wrap="OFF" tabindex="238" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="239" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="240" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="241" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="242" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="243" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="244" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="245" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="246" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="247" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="248" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="249" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="250" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="251" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="252" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="253" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="254" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="255" cols="11" rows="4" name="cell"></textarea> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <textarea wrap="OFF" tabindex="256" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="257" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="258" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="259" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="260" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="261" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="262" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="263" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="264" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="265" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="266" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="267" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="268" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="269" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="270" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="271" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="272" cols="11" rows="4" name="cell"></textarea> 
     </td> 
     <td> 
     <textarea wrap="OFF" tabindex="273" cols="11" rows="4" name="cell"></textarea> 
     </td> 
    </tr> 
    </tbody> 
</table> 
</div> 
</body> 
</html> 

回答

1

嘗試刪除「寬度:100%」 ......你設置該分區是唯一的窗口的寬度,我假設你希望它擴大和你的窗口會有水平滾動條。

1
<div style="border:1px solid red; float:left;"> 

小提琴:

http://jsfiddle.net/9hFsp/

+0

你的解決方案是偉大的。但現在,如果我調整窗口的大小(因爲這些內容顯示在Popup中),換句話說,如果我「最大化」,Div和表格不會增長,並且在最大化之前具有寬度(僅在Firefox中)。如果我添加寬度:100%,它會在Internet Explorer中打破我的第一個目的(容器寬度=表寬度)... –