代码如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyTable.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
div{
border: 1px #000000 solid;
}
td{
text-align:center;
width:100px;
height:30px;
border-right: 1px #000000 solid;
border-bottom:1px #000000 solid;
}
</style>
<script type="text/javascript">
var otherHeight = 62;
window.οnresize=function(){
document.getElementById("dataField").style.height = document.body.clientHeight-otherHeight+'px';
}
function setSize(){
document.getElementById("dataField").style.height = document.body.clientHeight-otherHeight+'px';
}
</script>
</head>
<body οnlοad="setSize()">
<div id="tableBox" style="width:100%;height:100%">
<div id = "titleField"style = "width:100%;height:30px; overflow: hidden;">
<table id = "titleTable" style = "width:700px;position:relative;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>1title</td>
<td>2title</td>
<td>3title</td>
<td>4title</td>
<td>5title</td>
<td>6title</td>
<td>7title</td>
</tr>
</table>
</div>
<div id = "dataField" style="overflow: scroll;width:100%;height:500px;" οnscrοll="javascript:titleTable.style.posLeft=-dataField.scrollLeft">
<table id = "dataTable" style="width:700px;" border="0" cellpadding="0" cellspacing="0">
<%
for(int i = 0 ;i<20;i++){
%>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<%
}
%>
</table>
</div>
</div>
</body>
</html>
JSP的div是没有onscroll方法的,MyEclipse会提示错误,但是,jsp最终会转成HTML,也就是说,用户访问的是HTML,JSP div的onscroll方法是可以使用的。
效果如下图: