|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>IE下横向内容超出宽度,自动滚动条也不会挡住表格内容</title><style type="text/css">.tablebox{width:500px; overflow:hidden; margin-left:0px; margin-top:0px; position:relative; z-index:0;}.dy{border:1px solid #999999; min-width:500px; border-bottom:none; margin-top:11px;}.dy td{text-overflow:ellipsis; word-break:keep-all; white-space:nowrap; } .dy_top{height:32px; background:#E3E3E3; border-right:1px solid #ffffff; width:136px; text-align:center; line-height:32px; font-weight:bold;}.dy_td{border-bottom:1px solid #a1a1a1; height:31px; text-align:center; line-height:31px;}</style> <script type="text/javascript" src="http://localhost:9086/inc/script/jquery1.3.js"></script><script type="text/javascript">$(document).ready(function(){var addHeight = 0;if($("#j_tablebox").get(0).scrollWidth > $("#j_tablebox").get(0).offsetWidth)addHeight = 18;$("#j_tablebox").css("height",($("#j_tablebox").get(0).scrollHeight+addHeight)+"px");$("#j_tablebox").css("overflowY","hidden");$("#j_tablebox").css("overflowX","auto");});</script></head><body> <div class="tablebox" id="j_tablebox"><table border="0" class="dy" cellspacing="0" cellpadding="0"><!-- 表头 --><tr><td class="dy_top">L1</td><td class="dy_top">L2</td><td class="dy_top">L3</td><td class="dy_top">L4</td></tr><tr><td class="dy_td">fdsafdsafdsa</td><td class="dy_td">fdsafdsaffdsafdsafdsafdsafdsafdsafdsafdsafdsa</td><td class="dy_td">fdsafdfdsafdsafdsadsa</td><td class="dy_td">fdsafdsa</td> </tr></table></div> </body></html>

在正常情况下,overflow:auto; 在IE5,IE6,IE7以下,是被挡住表格内容的;IE8以上正常;
|
|