<html><head>
<title>使用Div实现IFrame效果</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gbk">
<style type="text/css">
div.contenthead {
width: 300;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
div.contentdetail {
width: 300;
height: 100px;
overflow-x: auto;
overflow-y: auto;
}
.wide2 {
border-collapse: collapse;
table-layout: fixed;
}
</style>
<script type="text/javascript">
var thScrolling = false;
var tdScrolling = false;
function doTHScroll() {
/*
if(!tdScrolling) {
thScrolling = true;
document.all["tdframe"].scrollLeft = document.all["thframe"].scrollLeft;
thScrolling = false;
}
*/
}
function doTDScroll() {
if(!thScrolling) {
tdScrolling = true;
document.all["thframe"].scrollLeft = document.all["tdframe"].scrollLeft;
tdScrolling = false;
}
}
</script>
</head>
<body>
<table class="wide2">
<!--line 1-->
<tr>
<td >
<div id="thframe" class="contenthead" onScroll="doTHScroll()">
<table border="1" width="400" class="wide2">
<tr>
<td>head1</td>
<td>head1</td>
<td>head1</td>
<td>head1</td>
<td>head1</td>
</tr>
</table>
</div>
</td>
</tr>
<!--line 2-->
<tr>
<td>
<div id="tdframe" class="contentdetail" onScroll="doTDScroll()">
<table border="1" width="400" class="wide2">
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>