有時候，我們要實現一個效果：部分表頭及對應數據固定，而剩餘部分可以左右滾動，看起來會有點意思。我看過jQuery的固定表頭，不過感覺寫的複雜了，沒必要非
弄那麼複雜的js，只要些許的CSS控制也能輕鬆搞定的。
效果圖：
相關代碼如下：
<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script><style type="text/css">
body { background-color: #daf2ff;margin:0px 6px 0px 6px; padding:0px;}
#form1{margin:0px; padding:0px;}.font02{
FONT-FAMILY:"宋體";
FONT-SIZE:12px;
color:#ffffff;
}
.thead{ background:url(../Images/bj01.gif) repeat-x;color:#005B9A;
font-weight:bold;border:#AECCEB 1px
solid;background-color:#FFFFFF; height:16px;white-space:nowrap; word-break:all;}
.tbody{ color:#000000; font-weight:normal; background-color: #ffffff; border:#AECCEB 1px solid;
white-space:nowrap; word-break:all;height:20px;cursor:pointer;}
.tbodyselected{ color:#000000; font-weight:normal; background-color: #8090f1;
border:#AECCEB 1px solid;height:20px;cursor:pointer;}
.bg22{ background-color:#D4E6FE; color:#000000; font-size:12px; font-weight:normal;
height: 20px;border:#AECCEB 1px solid; cursor:pointer;}
.pagerlink{padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;border:#9AAFE5 1px solid;color: #2E6AB1;}
.pagerbutton{
background-color: #E8EDF0;border:#C8D3DE 1px solid; cursor:hand;
}
.pagertextbox{border:#7E9DB9 1px solid; }
div{margin:0px; padding:0px;width:100%;}
#TablescrollDiv1 td{cursor:pointer;}
</style><body>
<form id="form2" runat="server">
<table id="trheight" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"
style="background-color:#247BD7; " >
<tr>
<td style="height:28px; background-color:#FFFFFF; width:100%;" id="tdTitle">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="4" height="28">
<img src="../Images/rbg21.jpg" width="4" height="28" ></td>
<td width="300" background="../Images/rbg22.jpg">
</td>
<td align="center" background="../Images/rbg22.jpg" class="font02">
2011年開發區規建局項目配套工程一覽表</td>
<td width="300" align="left" background="../Images/rbg22.jpg">
<table border="0" cellspacing="0" cellpadding="0" style="width:91%; height: 11px; ">
<tr>
<td align="center">
<input type="image" name="btn_Look" id="btn_Look" src="../Images/icon7.gif" border="0"
οnclick="location='../ghj/ProjectRelationDetail.aspx';return false;" language="javascript"
style="height:11px;width:42px;" /> </td>
<td align="center">
<input type="image" name="btn_Add" id="btn_Add" src="../Images/icon2.gif" border="0"
οnclick="location='../ghj/ProjectRelationDetail.aspx';return false;" language="javascript"
style="height:11px;width:42px;" /> </td>
<td align="center">
<input type="image" name="btn_Edit" id="btn_Edit" src="../Images/icon4.gif" border="0"
οnclick="location='../ghj/ProjectRelationDetail.aspx';return false;" language="javascript"
style="height:11px;width:42px;" /></td>
<td align="center">
<input type="image" name="btn_Del" id="btn_Del" src="../Images/icon3.gif" border="0"
language="javascript" style="height:11px;width:42px;" /> </td>
<td align="center">
<input type="image" name="btn_Search" id="btn_Search" src="../Images/icon6.gif" border="0"
style="height:11px;width:42px;" />
<script type="text/javascript">
$(document).ready(function(){
$("[id^='btn_']").mouseover(function(){
$(this).css("cursor","pointer");
});
});
</script>
</td>
<td align="center">
<img src="../Images/icon5.gif" width="42" height="11"
style="display: none" ></td>
</tr>
</table>
</td>
<td width="4">
<img src="../Images/rbg23.jpg" width="4" height="28"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="TdHeight" style="text-align:left; background-color:#DAF2FF; " valign="top">
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#247BD7">
<tr>
<td id="trdiv1" align="right" valign="top" style="height:100%; background-color:#FFFFFF; width:98%;">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="1">
</td>
</tr>
</table>
<table id='Table2' style="border-collapse: collapse; width:100%;"
align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width:10%" align="left" valign="top">
<div style="margin:0px; padding:0px; position:absolute; left:6px; z-index:81; width:auto;" id="divHead">
<table id='Tablescroll' style="border-collapse: collapse; width:10%;"
align="left" cellpadding="2" cellspacing="0">
<thead>
<tr >
<td align="center" class="thead" style="width:45%;">
序號</td>
<td align="center" class="thead" style="width:55%;">
配套單號</td>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer;">
<td align="center" class="tbody" >1</td>
<td align="center" class="tbody" >2010076</td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >2</td>
<td align="center" class="tbody" >2010092</td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >3</td>
<td align="center" class="tbody" >2010092</td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >4</td>
<td align="center" class="tbody" >2010092</td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >5</td>
<td align="center" class="tbody" >2010092</td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >6</td>
<td align="center" class="tbody" >2010092</td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >7</td>
<td align="center" class="tbody" >2010092</td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >8</td>
<td align="center" class="tbody" >2010092</td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >9</td>
<td align="center" class="tbody" >2010092</td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >10</td>
<td align="center" class="tbody" >2010092</td>
</tr>
</tbody>
</table>
</div> </td>
<td style="width:90%" align="center" valign="top">
<div style="margin:0px; padding:0px; overflow-x:scroll;overflow-y:hidden; z-index:80;
position:absolute;
left:6px; padding-left:10%; width:89%;" id="divScroll">
<table id='TablescrollDiv1' style="border-collapse: collapse; width:120%;"
align="left" cellpadding="2" cellspacing="0">
<thead>
<tr >
<td align="center" class="thead" style="width:10%;">
項目名稱</td>
<td align="center" class="thead" style="width:9%;">
配套內容</td>
<td align="center" class="thead" style="width:10%;">
項目地點</td>
<td align="center" class="thead" style="width:7%;">
接單日期</td>
<td align="center" class="thead" style="width:7%;">
審批日期</td>
<td align="center" class="thead" style="width:7%;">
轉發日期</td>
<td align="center" class="thead" style="width:9%;">
實施部門</td>
<td align="center" class="thead" style="width:9;">
施工單位</td>
<td align="center" class="thead" style="width:7%;">
項目經理（聯繫方式）</td>
<td align="center" class="thead" style="width:8%;">
進度綜述</td>
<td align="center" class="thead" style="width:9%;">
負責工程</td>
<td align="center" class="thead" style="width:5%;">
需協調解決事項</td>
<td align="center" class="thead" style="width:7%;">
備註</td>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer;" οnclick="this.className='tbodyselected';"
οndblclick="location.href='../ghj/ProjectRelationDetail.aspx'; " >
<td align="center" class="tbody" >
<a href="../ghj/projectRelationDetail.aspx" target="_self">景智光電項目</a></td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >東至蓬溪路，南至金湖路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >勝樊市政</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土已完成80%</td>
<td align="center" class="tbody" >溪蓬北路延南段監理</td>
<td align="center" class="tbody" ></td>
<td align="center" class="tbody" ></td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >開發區規建局規劃科</td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >北至豐慶路，東至長江路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >一華市政有限公司</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土施工單位已確定（衡山變等地塊）</td>
<td align="center" class="tbody" ></td>
<td align="center" class="tbody" >無進場道路</td>
<td align="center" class="tbody" ></td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >開發區規建局規劃科</td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >北至慶豐路，東至長江路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >華一市政有限公司</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土施工單位已確定（衡山變等地塊）</td>
<td align="center" class="tbody" >蓬溪北路南延段監理</td>
<td align="center" class="tbody" >無進場道路</td>
<td align="center" class="tbody" ></td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >開發區規建局規劃科</td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >北至慶豐路，東至長江路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >華一市政有限公司</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土施工單位已確定（衡山變等地塊）</td>
<td align="center" class="tbody" ></td>
<td align="center" class="tbody" >無進場道路</td>
<td align="center" class="tbody" ></td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >開發區規建局規劃科</td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >北至慶豐路，東至長江路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >華一市政有限公司</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土施工單位已確定（衡山變等地塊）</td>
<td align="center" class="tbody" ></td>
<td align="center" class="tbody" >無進場道路</td>
<td align="center" class="tbody" ></td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >開發區規建局規劃科</td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >北至慶豐路，東至長江路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >華一市政有限公司</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土施工單位已確定（衡山變等地塊）</td>
<td align="center" class="tbody" ></td>
<td align="center" class="tbody" >無進場道路</td>
<td align="center" class="tbody" ></td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >開發區規建局規劃科</td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >北至慶豐路，東至長江路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >華一市政有限公司</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土施工單位已確定（衡山變等地塊）</td>
<td align="center" class="tbody" ></td>
<td align="center" class="tbody" >無進場道路</td>
<td align="center" class="tbody" ></td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >開發區規建局規劃科</td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >北至慶豐路，東至長江路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >華一市政有限公司</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土施工單位已確定（衡山變等地塊）</td>
<td align="center" class="tbody" >蓬溪北路南延段監理</td>
<td align="center" class="tbody" >無進場道路</td>
<td align="center" class="tbody" ></td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >開發區規建局規劃科</td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >北至慶豐路，東至長江路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >華一市政有限公司</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土施工單位已確定（衡山變等地塊）</td>
<td align="center" class="tbody" ></td>
<td align="center" class="tbody" >無進場道路</td>
<td align="center" class="tbody" ></td>
</tr>
<tr οnclick="this.className='tbodyselected';" style="cursor:pointer;">
<td align="center" class="tbody" >開發區規建局規劃科</td>
<td align="center" class="tbody" >填土</td>
<td align="center" class="tbody" >北至慶豐路，東至長江路</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-13</td>
<td align="center" class="tbody" >2010-6-17</td>
<td align="center" class="tbody" >建管所</td>
<td align="center" class="tbody" >華一市政有限公司</td>
<td align="center" class="tbody" >李鈞</td>
<td align="center" class="tbody" >填土施工單位已確定（衡山變等地塊）</td>
<td align="center" class="tbody" ></td>
<td align="center" class="tbody" >無進場道路</td>
<td align="center" class="tbody" ></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> </tr>
</table>
<div class="bg40" style="padding:0px; margin:0px; z-index:80; position:absolute;" id="divPageHelper">
<div id="PagerHelper1_PagePanel" language="javascript"
οnkeypress="javascript:return WebForm_FireDefaultButton(event, 'PagerHelper1_Button1')"><table cellspacing="0" cellpadding="0" border="0" align="center" width="100%"
style="height:21px; background-color:#D4E6FE;">
<tr class="">
<td align="center" valign="middle">
第 <span id="PagerHelper1_PageNumber" style="color:Red;">1</span> 頁/共
<span id="PagerHelper1_PageTotal" style="color:Red;">2</span> 頁
共有 <span id="PagerHelper1_RecordNumber" style="color:Red;">25</span>
條記錄
<a id="PagerHelper1_lnkFirst" disabled="disabled">首頁</a> |
<a id="PagerHelper1_lnkPrevious" disabled="disabled">上一頁</a> |
<a id="PagerHelper1_lnkNext" href="#">下一頁</a> |
<a id="PagerHelper1_lnkLast" href="#">尾頁</a>
轉到
<input name="PagerHelper1:SelectPage" type="text" id="PagerHelper1_SelectPage"
class="pagertextbox" maxlength="8" style="height:15px; width:32px;" />
<input type="image" name="PagerHelper1:Button1" id="PagerHelper1_Button1"
src="../Images/GO.gif" align="top" border="0" style="height:17px;width:33px;" />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#PagerHelper1_Button1").click(function(){
return check_txtbox();
});
});
function check_txtbox()
{
var PageNum=document.getElementById("PagerHelper1_SelectPage").value;
if(PageNum.trim()=="")
{
alert('請輸入頁碼!');
document.getElementById("PagerHelper1_SelectPage").focus();
return false;
}
if(isNaN(PageNum.trim()))
{
alert('您輸入的頁碼包含其他字符,請輸入正確的頁碼!');
document.getElementById("PagerHelper1_SelectPage").focus();
return false;
}
else
{
if(parseInt(PageNum.trim())<=0)
{
alert('您輸入的頁碼過小,請輸入正確的頁碼!');
document.getElementById("PagerHelper1_SelectPage").focus();
return false;
}
var pageCount=parseInt(document.getElementById("PagerHelper1_PageTotal").innerHTML);
if(parseInt(PageNum.trim())>pageCount)
{
alert('您輸入的頁碼過大，請輸入正確的頁碼!');
document.getElementById("PagerHelper1_SelectPage").focus();
return false;
}
}
document.getElementById("PagerHelper1_SelectPage").value= "" + PageNum;return true;
}
var arrCheckAll = document.getElementsByTagName("input");
var chkAll=null;
for(var i=0;i<arrCheckAll.length;i++){
if(arrCheckAll[i].id && arrCheckAll[i].id.indexOf("chkAll")>=0){
arrCheckAll[i].οnclick=function(){
e=event.srcElement ? event.srcElement:event.target;
for(var j=0;j<arrCheckAll.length;j++){
if(arrCheckAll[j].id && arrCheckAll[j].id.indexOf("chkEleID")>=0){
arrCheckAll[j].checked=e.checked;
}
}
};
}
}
//爲上面提供各個JS驗證方法提供.trim()屬性
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
</script>
<input type="hidden" name="hidIDinfo" id="hidIDinfo" />
</div>
<div id="result" ></div>
<input id="Hidden1" type="hidden" />
<input type="hidden" name="hidPageSize" id="hidPageSize" value="8" />
</form>
<script type="text/javascript" defer="defer">
$(document).ready(function(){
var H=parseInt($("#divScroll").css("padding-left"));
var Left=parseInt($("#TablescrollDiv1").position().left);//固定表頭及其數據部分
$("#divHead").css("width",parseInt(Left));
$("#Tablescroll").css("width",parseInt(Left));
var T=parseInt($("#divScroll").position().top);//移動數據上方位置
var divHeight=parseInt($("#divScroll").css("height")); //alert(T+","+divHeight+","+50);
$("#divPageHelper").css("top",parseInt(T+divHeight));//分頁控件位置定位
//var TablescrollLeft=$("#Tablescroll").position().left;
//$("#divScroll").(parseInt(TablescrollLeft)) ;
});
</script>
</body>
