1.在table中添加div。如下
<div class="mainDiv" >
<table cellSpacing="0" style="border-bottom: 0px;" id="queryTable">
<thead><td class="detail_tabtit"><span><label id="title">查询结果列表</label></span></td></thead>
<tbody>
<tr>
<td>
<table id='sysLogTable' turnpage='true'
pagesizelist='10,20,30,50' border="0" cellpadding="0"
cellspacing="0" width="101%">
<td>测试1</td>
<td>测试2</td>
<td>测试3</td>
</td>
</tr>
</tbody>
</table>
</div>
2.添加css样式,如下:
<style type="text/css">
.mainDiv {
overflow-x: auto;
overflow-y:hidden;
/* WIDTH: expression(document.getElementById('sysLogTable').clientWidth-10) */
}
.resizeTitle {
float:none;
}
.resizeBar {
float:none;
}
.mainDiv table{white-space: nowrap;}
.mainDiv th{white-space: nowrap;}
.mainDiv td{white-space: nowrap;}
</style>
3.计算table的长、高,如下:
//设置滚动条方法
function setScroll(){
//设置滚动条 div的高度
var tableHeight = $("#queryTable").height();
$(".mainDiv").css("height",tableHeight+10+'px');
var tableQueryWid = $("#tb_content").width();
$(".mainDiv").css("width",tableQueryWid+'px');
$("#queryTable").css("width",tableQueryWid+1+'px');
$("#queryTable").attr("width",tableQueryWid+1+'px');
}
4.IE变大缩小,对窗口做相关控制,如下:
//窗口监听 ,控制窗口大小
$(document).ready(function(){
$(window).resize(function(){
setScroll();
});
});
5.把计算滚动条的方法放入到初始化方法,打开页面即可看到滚动条。