<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格头部和侧边栏固定</title>
<style>
body,ul,li,div,table,tbody,td,tr{ padding:0; margin:0;}
body{font-size:12px;}
li{ list-style:none;}
.iTable_div{width:100%;overflow:hidden; position:relative;z-index:99999;}
.iLeft_tit{ text-align:center; width:130px;border-left:1px solid #ccc;border-right:1px solid #ccc; position:absolute; left:0; top:0; background:#ecf4fd; box-sizing:border-box;overflow:hidden; padding-top:18px;}
.iLeft_tit li{height:18px; border-bottom:1px solid #ccc; box-sizing:border-box;}
.iTop_tit{position:absolute; height:18px; top:0; left:129px;z-index:10; background:#c4def7;width:86.8%; overflow:hidden;}
.iTop_tit ul{width:2000%;overflow:hidden; box-sizing:border-box;border-left:none; text-align:center; border:1px solid #ccc; height:18px;border-left:none;}
.iTop_tit li{float:left; width:130px; border-left:1px solid #ccc; box-sizing:border-box; height:18px; }
.itable_content{width:88%;padding-left:129px; padding-top:18px;overflow:auto;}
.itable{border-spacing:0;table-layout:fixed;}
.itable td{ width:130px; height:18px;box-sizing:border-box; text-align:center;border-left:1px solid #ccc; border-bottom:1px solid #ccc;}
#iFixed_li{position:absolute; left:0; top:0; background:#c4def7;z-index:200; width:130px; height:18px;border-top:1px solid #ccc; }
</style>
</head>
<body>
<div class="iTable_div">
<div class="iLeft_tit">
<ul>
<li id="iFixed_li"></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
<div class="iTop_tit">
<ul class="iTop_ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div class="itable_content" id="itable_content">
<table class="itable" id="itable">
</table>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
var div_height=300;
var table_html='';
for(var i=0;i<20;i++)
{
table_html+='<tr><td class="tr_first_td">我是中国</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>'
}
function iF_Scroll(div_height){
$('#itable').html(table_html).width(15*130);
$(".iTable_div").height(div_height);
$(".itable_content").height(div_height-17);
$(".iLeft_tit").height(div_height-17);
var iLeft_tit_height=div_height-17;
var iTop_tit_left=$(".iTop_tit").offset().left;
var iTop_tit_width=$(".iTop_tit").width();
$(".itable_content").scroll(function(){
var div_scrollLeft=$(this).scrollLeft();
var div_scrollTop=$(this).scrollTop();
$(".iLeft_tit").css({"top":-div_scrollTop+"px","height":iLeft_tit_height+div_scrollTop+"px"});
$(".iTop_tit").css({"left":iTop_tit_left-div_scrollLeft,"width":iTop_tit_width+div_scrollLeft+"px"})
$("#iFixed_li").css("top",div_scrollTop)
})
}
iF_Scroll(div_height);
</script>
</body>
</html>
