{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 啃猪蹄的小仙女 的问题《DIV with overflow:auto and a 100% wide table》','https://www.manongdao.com/q-1306124.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I hope someone might be able to help me here. I've tried to simplify my example as best I can.
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.
Within the DIV I have a table to present some data, and it's width is 100%.
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.
This is IE specific - firefox works perfectly.
Full source below. Any help greatly appreciated.
Tony
<!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>
added 03/16/10... thought it might be interesting to point out that GWT's source code points to this question in a comment... 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
Unfortunately, this is a quirk of IE. There's no way using pure XHTML and CSS to get it to work the same as Firefox.
You could do it using JavaScript to detect the size of the window and set the width of the table dynamically. I can add more detail on that if you really wanted to go that route.
If it's the body tag that insists on having the horizontal scroll (I guess because I have child elements set to 100%) you can add this to your CSS to fix the problem in IE7 (or 8 compatibility mode):
This looks like it should fix your problem, as long as you are not apposed to condition statements. Fixing IE overflow
I had a problem with excessive horizonal bar in IE7. I've used D Carter's solution slighty changed
To work in IE browser lesser than 7 you need add:
Okay, this one plagued me for a LONG time. I have made far too many designs that have extra padding on the right, allowing for IEs complete disregard for their own scrollbar.
The answer is: nest two divs, give them both hasLayout, set the inner one to overflow.
http://www.satzansatz.de/cssd/onhavinglayout.html
Go there to read more about having layout
Eran Galperin's solution fails to account for the fact that simply turning off horizontal scrolling will still allow the table to underlap the vertical scrollbar. I assume this is because IE is calculating the meaning of "100%" before deciding that it needs a vertical scrollbar, then failing to re-adjust for the remaining horizontal space available.
cetnar's solution above nails it, though:
This works properly on IE6 and 7 in my tests. From what I can tell, the "" hack doesn't appear to actually be necessary on IE6.