मुझे उम्मीद है कि कोई मेरी मदद करने में सक्षम हो सकता है। मैंने अपने उदाहरण को सरल बनाने की कोशिश की है जितना मैं कर सकता हूं।अतिप्रवाह के साथ डीआईवी: ऑटो और 100% चौड़ी तालिका
मेरे पास एक बिल्कुल स्थित डीआईवी है, जो इस उदाहरण के लिए मैंने ब्राउज़र विंडो भर दी है। इस div में ओवरफ़्लो है: जब DIV प्रदर्शित करने के लिए सामग्री बहुत बड़ी होती है तो स्क्रॉल बार प्रदान करने के लिए ऑटो विशेषता।
डीआईवी के भीतर मेरे पास कुछ डेटा पेश करने के लिए एक टेबल है, और इसकी चौड़ाई 100% है।
जब सामग्री बहुत बड़ी लंबवत हो जाती है, तो मुझे लंबवत स्क्रॉल बार दिखाई देने की उम्मीद है और स्क्रॉल बार को समायोजित करने के लिए तालिका क्षैतिज रूप से थोड़ी कम हो जाती है। हालांकि आईई 7 में क्या होता है क्षैतिज स्क्रॉल बार भी प्रकट होता है, भले ही 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 runat="server">
<title>Table sizing bug?</title>
<style>
#maxsize
{
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
border: 5px solid silver;
overflow: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="maxsize">
<p>This will be fine until such time as the vertical size forces a
vertical scroll bar. At this point I'd expect the table to re-size
to now take into account of the new vertical scroll bar. Instead,
IE7 keeps the table the full size and introduces a horizontal
scroll bar.
</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
</tr>
</tbody>
</table>
<p>Resize the browser window vertically so this content doesn't
fit any more</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
</div>
</form>
</body>
</html>
03/16/10 जोड़ा ... सोचा था कि यह इंगित करने के लिए दिलचस्प हो सकता है कि एक टिप्पणी में यह सवाल ... को GWT के स्रोत कोड अंक http://www.google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/user/client/ui/ScrollPanel.java&q=%22hack%20to%20account%20for%20the%22%20scrollpanel&sa=N&cd=1&ct=rc&l=48
यह विधि क्षैतिज स्क्रॉलबार को दबाती है, लेकिन यह आंतरिक तालिका की चौड़ाई को दोबारा नहीं हटाती है। तो जब लंबवत स्क्रॉलबार दिखाए जाते हैं, तो आंतरिक तालिका का किनारा काट दिया जाता है। यह आपके लेआउट में स्वीकार्य हो सकता है या नहीं भी हो सकता है। –