Databases
StackOverflow2013
Postsdbo
PODIV with overflow:auto and a 100% wide table
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODIV with overflow:auto and a 100% wide table
    text
    copied!<p>I hope someone might be able to help me here. I've tried to simplify my example as best I can.</p> <p>I have an absolutely positioned DIV, which for this example I've made fill the browser window. This div has the overflow:auto attribute to provide scroll bars when the content is too big for the DIV to display.</p> <p>Within the DIV I have a table to present some data, and it's width is 100%.</p> <p>When the content becomes too large vertically, I expect the vertical scroll bar to appear and the table to shrink horizontally slightly to accommodate the scroll bar. However in IE7 what happens is the horizontal scroll bar also appears, despite there still being enough space horizontally for all the content in the div.</p> <p>This is IE specific - firefox works perfectly.</p> <p>Full source below. Any help greatly appreciated.</p> <p>Tony</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt; &lt;title&gt;Table sizing bug?&lt;/title&gt; &lt;style&gt; #maxsize { position: absolute; left: 5px; right: 5px; top: 5px; bottom: 5px; border: 5px solid silver; overflow: auto; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;div id="maxsize"&gt; &lt;p&gt;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. &lt;/p&gt; &lt;table width="100%" cellspacing="0" cellpadding="0" border="1"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;A&lt;/td&gt; &lt;td&gt;B&lt;/td&gt; &lt;td&gt;C&lt;/td&gt; &lt;td&gt;D&lt;/td&gt; &lt;td&gt;E&lt;/td&gt; &lt;td&gt;F&lt;/td&gt; &lt;td&gt;G&lt;/td&gt; &lt;td&gt;H&lt;/td&gt; &lt;td&gt;I&lt;/td&gt; &lt;td&gt;J&lt;/td&gt; &lt;td&gt;K&lt;/td&gt; &lt;td&gt;L&lt;/td&gt; &lt;td&gt;M&lt;/td&gt; &lt;td&gt;N&lt;/td&gt; &lt;td&gt;O&lt;/td&gt; &lt;td&gt;P&lt;/td&gt; &lt;td&gt;Q&lt;/td&gt; &lt;td&gt;R&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Resize the browser window vertically so this content doesn't fit any more&lt;/p&gt; &lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello&lt;/p&gt; &lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello&lt;/p&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p><strong>added 03/16/10...</strong> thought it might be interesting to point out that GWT's source code points to this question in a comment... <a href="http://www.google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/user/client/ui/ScrollPanel.java&amp;q=%22hack%20to%20account%20for%20the%22%20scrollpanel&amp;sa=N&amp;cd=1&amp;ct=rc&amp;l=48" rel="nofollow noreferrer">http://www.google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/user/client/ui/ScrollPanel.java&amp;q=%22hack%20to%20account%20for%20the%22%20scrollpanel&amp;sa=N&amp;cd=1&amp;ct=rc&amp;l=48</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload