层的移动,使用了jquery

直接上代码.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< title > Sales Information System </ title >

< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" >

< style type ="text/css" >

body {

margin: 0px 0px 0px 2px;

padding: 0;

text-align:left;

width:100%;

height:100%;

}

.report

{

margin:0;

padding:0;

border-collapse:collapse;

width:1033px;

}

.report .bodyen

{

margin:0;

padding:0;

font-family: "Trebuchet MS";

font-size: 11px;

font-weight: normal;

color: #000000;

line-height: 25px;

text-align: left;

background-color:#FFFFFF;

}

.report .header {

font-family: "Trebuchet MS";

font-size: 11px;

font-weight: bold;

color: #FFFFFF;

line-height: 25px;

text-align: center;

background-color: #32659C;

}

.report .bodyodd

{

margin:0;

padding:0;

font-family: "Trebuchet MS";

font-size: 11px;

font-weight: normal;

color: #000000;

line-height: 25px;

text-align: center;

background-color:#FFFFFF;

}

</ style >

< script src ="js/jquery.js" type ="text/javascript" ></ script >

< script src ="js/jquery.dimensions.js" type ="text/javascript" ></ script >

< script language ="javascript" >

$(document).ready(function(){

$("#divContent").scroll(function(){

document.getElementById("tabHead").scrollLeft=$("#divContent").scrollLeft();

document.getElementById("tabLeft").scrollTop=$("#divContent").scrollTop();

});

</ script >

</ head >

< body >

< table class ="report" cellspacing ="0" cellpadding ="0" border ="0" >

< tr >

< td >

< div id ="tabFixed" style ="padding-right: 0px; padding-left: 0px;padding-bottom: 0px; overflow: hidden; width: 80px; padding-top: 0px; height: 53px" >

< table class ="header" style ="border-collapse: collapse" bordercolor ="#cccccc" height ="53" width ="160" border ="1" >

< tr >

< td width ="80" > TYPE </ td >

</ tr >

</ table >

</ div >

</ td >

< td class ="bodyen" >

< div id ="tabHead" style ="padding-right: 0px; padding-left: 0px;left: 0px; padding-bottom: 0px; overflow: hidden; width: 953px; padding-top: 0px;top: 0px; height: 53px" >

< table class ="header" style ="border-collapse: collapse" bordercolor ="#cccccc" width ="1200" border ="1" >

< tr >

< td width ="300" colspan ="3" height ="25" > 2003 </ td >

< td width ="300" colspan ="3" height ="25" > 2004 </ td >

< td width ="300" colspan ="3" height ="25" > 2008 </ td >

< td width ="300" colspan ="3" height ="25" > Total </ td >

</ tr >

< tr >

< td width ="100" height ="25" > Warranty </ td >

< td width ="100" height ="25" > Warranty L1 </ td >

< td width ="100" height ="25" > Warranty L2 </ td >

< td width ="100" height ="25" > Warranty </ td >

< td width ="100" height ="25" > Warranty L1 </ td >

< td width ="100" height ="25" > Warranty L2 </ td >

< td width ="100" height ="25" > Warranty </ td >

< td width ="100" height ="25" > Warranty L1 </ td >

< td width ="100" height ="25" > Warranty L2 </ td >

< td width ="100" height ="25" > Warranty </ td >

< td width ="100" height ="25" > Warranty L1 </ td >

< td width ="100" height ="25" > Warranty L2 </ td >

</ tr >

</ table >

</ div >

</ td >

</ tr >

< tr >

< td valign ="top" >

< div id ="tabLeft" style ="padding-bottom: 1px; overflow: hidden;width: 80px; height: 392px" >

< table class ="bodyodd" style ="border-collapse: collapse" bordercolor ="#cccccc" width ="80" border ="1" >

< tr >

< td width ="80" > TYPE1 </ td >

</ tr >

< tr >

< td width ="80" > TYPE2 </ td >

</ tr >

< tr >

< td width ="80" > TYPE3 </ td >

</ tr >

< tr >

< td width ="80" > TYPE4 </ td >

</ tr >

< tr >

< td width ="80" > TYPE5 </ td >

</ tr >

< tr >

< td width ="80" > TYPE6 </ td >

</ tr >

< tr >

< td width ="80" > TYPE7 </ td >

</ tr >

< tr >

< td width ="80" > TYPE8 </ td >

</ tr >

< tr >

< td width ="80" > TYPE9 </ td >

</ tr >

< tr >

< td width ="80" > TYPE10 </ td >

</ tr >

< tr >

< td width ="80" > TYPE11 </ td >

</ tr >

< tr >

< td width ="80" > TYPE12 </ td >

</ tr >

< tr >

< td width ="80" > TYPE13 </ td >

</ tr >

< tr >

< td width ="80" > TYPE14 </ td >

</ tr >

< tr >

< td width ="80" > Total </ td >

</ tr >

</ table >

</ div >

</ td >

< td class ="bodyen" >

< div id ="divContent" style ="padding-right: 0px; padding-left: 0px;left: 0px; padding-bottom: 0px; overflow: scroll; width: 970px; padding-top: 0px;top: 0px; height: 410px" >

< table class ="bodyodd" style ="border-collapse: collapse" bordercolor ="#cccccc" width ="1200" border ="1" >

< tr >

< td width ="97" height ="25" > 147,160,722.08 </ td >