table 表头固定
//表头固定 2013.7.4 //相关页面需在最外层用<div class="main_right"></div>包裹， //---<HeaderTemplate> //<div id="tableContainer" class="tableContainer"> // <div> //---<table border="0" cellspacing="1" bgcolor="#CCCCCC" width="100%" class="contable"> //<thead> //</thead> //<tbody> //---<FooterTemplate> //</tbody> //---</table> //</div> //</div> function tablefixed() { $(".main_right").height($("#ifrmain").height()); if ($(".tableContainer .contable").height() > ($(window).height() - $(".tableContainer").prev("table").height() - 120)) { $(".tableContainer").height($(window).height() - $(".tableContainer").prev("table").height() - 120) } else { $(".tableContainer").height($(".tableContainer .contable").height()); } var browser_version = $.browser.version; $("#tableContainer").scroll(function (e) { if ($(this).scrollTop() > 0) { if ('6.0' == browser_version || '7.0' == browser_version) { $(".fixedHeader").find("td").css({ "position": "relative", "top": $("#tableContainer").scrollTop() + "px", "z-index": "1" }); } else if ($("#thead").length == 0) { var thead = $('<table id="thead" cellspacing="1" border="0" cellspacing="0" width="100%">' + $(".contable thead").html() + '</table>'); $("#tableContainer").prepend(thead); for (var i = 0; i < $(".contable thead").find("td").length; i++) { $("#thead").css("width", $(".contable thead").width()); $("#thead").find("td").eq(i).css({ "position": "absolute", "left": $(".contable>thead").find("td").eq(i).offset().left - 11 + "px", "width": $(".contable>thead").find("td").eq(i).width() + "px" }); } } } else { $("#thead").remove(); } }); };//end
实例2：
<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %> <asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent"> <style> table { margin:0;} td { border:1px solid #bbb; background:#fff;} .fixedHeader td ,#thead td{ background:#f00; color:#fff; border:1px solid #bbb;} #thead td{ background:#f00; color:#fff; border:1px solid #ffd800;} #div { height:300px; overflow-y:scroll; overflow-x:hidden;} #thead { position:fixed; z-index:85; border-collapse:collapse;} </style> <script> $(function () { var browser_version = $.browser.version; $("#div").scroll(function (e) { if ($(this).scrollTop() > 0) { if ('6.0' == browser_version || '7.0' == browser_version) { $(".fixedHeader").find("td").css({ "position": "relative", "top": $("#div").scrollTop(), "z-index": "1" }); } else if ($("#thead").length == 0) { var thead = $('<table id="thead" cellspacing="1" border="0" cellspacing="0">' + $("table thead").html() + '</table>'); $("#div").prepend(thead); for (var i = 0; i < $("table thead").find("td").length; i++) { $("#thead").find("td").eq(i).css({ "position": "absolute", "left": $("table>thead").find("td").eq(i).offset().left-1+"px", "width": $("table>thead").find("td").eq(i).width()+"px" }); } } } else { $("#thead").remove(); } }); }); </script> <div id="div"> <table border="0" cellspacing="1" width="100%" bgcolor="#fff"> <thead class="fixedHeader"> <tr> <td align="center" class="main_td"> 提现用户 </td> <td align="center" class="main_td"> 姓名 </td> <td align="center" class="main_td"> 提现银行 </td> <td align="center" class="main_td"> 提现支行省市 </td> <td align="center" class="main_td"> 提现账号 </td> <td align="center" class="main_td"> 提现总额 </td> <td align="center" class="main_td"> 到账金额 </td> <td align="center" class="main_td"> 手续费 </td> <td align="center" class="main_td"> 提现时间 </td> <td align="center" class="main_td"> 状态 </td> <td align="center" class="main_td"> 审核员 </td> <td align="center" class="main_td"> 审核时间 </td> <td align="center" class="main_td"> 审核备注 </td> <td align="center" class="main_td"> 操作 </td> </tr> </thead> <tbody class="scrollContent"> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> 广东省深圳市 </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 6,000.00 </td> <td align="right"> 5,997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/9/13 16:25:29 </td> <td align="center"> 审核通过 </td> <td align="center"> cyril </td> <td align="center"> 2012/9/13 16:25:43 </td> <td align="left"> jj </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> 广东省深圳市 </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 5,000.00 </td> <td align="right"> 4,997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/9/13 15:52:13 </td> <td align="center"> 审核通过 </td> <td align="center"> cyril </td> <td align="center"> 2012/9/13 16:24:06 </td> <td align="left"> 2 </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> 广东省深圳市 </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 5,000.00 </td> <td align="right"> 4,997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/9/13 15:51:06 </td> <td align="center"> 审核通过 </td> <td align="center"> cyril </td> <td align="center"> 2012/9/13 15:54:05 </td> <td align="left"> fg2 </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> 广东省深圳市 </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 5,000.00 </td> <td align="right"> 4,997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/9/13 15:50:30 </td> <td align="center"> 审核通过 </td> <td align="center"> cyril </td> <td align="center"> 2012/9/13 15:52:51 </td> <td align="left"> fh </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> 上海支行 中国银行 </td> <td align="center"> 上海上海 </td> <td align="center"> 6222023602022870902 </td> <td align="right"> 50,000.00 </td> <td align="right"> 49,995.00 </td> <td align="right"> 5.00 </td> <td align="center"> 2012/9/13 15:48:16 </td> <td align="center"> 审核失败 </td> <td align="center"> cyril </td> <td align="center"> 2012/9/13 15:49:46 </td> <td align="left"> bb </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> qq 中国工商银行 </td> <td align="center"> </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 1,000.00 </td> <td align="right"> 997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/8/27 13:10:19 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> 上海支行 中国银行 </td> <td align="center"> 上海上海 </td> <td align="center"> 6222023602022870902 </td> <td align="right"> 1,000.00 </td> <td align="right"> 997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/8/27 13:42:06 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> 广东省深圳市 </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 50,000.00 </td> <td align="right"> 49,995.00 </td> <td align="right"> 5.00 </td> <td align="center"> 2012/8/27 13:34:59 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> 广东省深圳市 </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 1,000.00 </td> <td align="right"> 997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/8/27 13:32:38 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> qq 中国工商银行 </td> <td align="center"> </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 1,000.00 </td> <td align="right"> 997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/8/27 13:10:19 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=23"> lend04</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思 </td> <td align="center"> QQ 中国工商银行 </td> <td align="center"> 广东省深圳市 </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 200.00 </td> <td align="right"> 197.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/8/27 13:09:42 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=30"> lend06</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思远 </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> </td> <td align="center"> cxxgfdgfdghdgfcf1 </td> <td align="right"> 8,519.86 </td> <td align="right"> 8,516.86 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/5/16 16:22:07 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=30"> lend06</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思远 </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> </td> <td align="center"> cxxgfdgfdghdgfcf1 </td> <td align="right"> 8,519.87 </td> <td align="right"> 8,516.87 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/5/16 16:21:33 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=5"> suenping</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 苏恩平 </td> <td align="center"> 红领支行 平安银行 </td> <td align="center"> </td> <td align="center"> 4444444444444444444 </td> <td align="right"> 6,967.52 </td> <td align="right"> 6,964.52 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/5/16 16:00:49 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> qq 中国工商银行 </td> <td align="center"> </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 46,863.41 </td> <td align="right"> 46,858.41 </td> <td align="right"> 5.00 </td> <td align="center"> 2012/5/16 15:59:01 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=5"> suenping</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 苏恩平 </td> <td align="center"> 红领支行 平安银行 </td> <td align="center"> </td> <td align="center"> 4444444444444444444 </td> <td align="right"> 967.52 </td> <td align="right"> 964.52 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/5/16 16:00:14 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=30"> lend06</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思远 </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> </td> <td align="center"> cxxgfdgfdghdgfcf1 </td> <td align="right"> 8,519.80 </td> <td align="right"> 8,516.80 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/5/16 15:53:08 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=30"> lend06</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思远 </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> </td> <td align="center"> cxxgfdgfdghdgfcf1 </td> <td align="right"> 8,519.00 </td> <td align="right"> 8,516.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/5/16 15:52:43 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=30"> lend06</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思远 </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> </td> <td align="center"> cxxgfdgfdghdgfcf1 </td> <td align="right"> 500.00 </td> <td align="right"> 497.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/5/16 15:50:07 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=5"> suenping</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 苏恩平 </td> <td align="center"> 红领支行 平安银行 </td> <td align="center"> </td> <td align="center"> 4444444444444444444 </td> <td align="right"> 6,000.00 </td> <td align="right"> 5,997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/5/16 13:07:07 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=23"> lend04</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思 </td> <td align="center"> QQ 中国工商银行 </td> <td align="center"> 广东省深圳市 </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 300.00 </td> <td align="right"> 297.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/3/28 16:08:08 </td> <td align="center"> 审核通过 </td> <td align="center"> cyril </td> <td align="center"> 2012/3/28 16:08:51 </td> <td align="left"> cv </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=30"> lend06</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思远 </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> </td> <td align="center"> cxxgfdgfdghdgfcf1 </td> <td align="right"> 29,400.00 </td> <td align="right"> 29,397.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/3/26 17:39:12 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=16"> invest1</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> jason111 </td> <td align="center"> qq 中国工商银行 </td> <td align="center"> </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 30,001.00 </td> <td align="right"> 29,996.00 </td> <td align="right"> 5.00 </td> <td align="center"> 2012/2/15 16:05:29 </td> <td align="center"> 审核通过 </td> <td align="center"> cyril </td> <td align="center"> 2012/2/23 16:41:23 </td> <td align="left"> tyyery </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=16"> invest1</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> jason111 </td> <td align="center"> qq 中国工商银行 </td> <td align="center"> </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 30,000.00 </td> <td align="right"> 29,997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/2/15 15:56:16 </td> <td align="center"> 审核失败 </td> <td align="center"> cyril </td> <td align="center"> 2012/2/23 16:41:42 </td> <td align="left"> rt </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=32"> invest6</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思远 </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 2,000.00 </td> <td align="right"> 1,997.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/1/13 14:51:06 </td> <td align="center"> 审核通过 </td> <td align="center"> cyril </td> <td align="center"> 2012/1/13 14:53:28 </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=30"> lend06</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> 曾思远 </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> </td> <td align="center"> cxxgfdgfdghdgfcf1 </td> <td align="right"> 3,627.00 </td> <td align="right"> 3,624.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/1/12 16:17:14 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=19"> invest2</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> jason444 </td> <td align="center"> vv 中国银行 </td> <td align="center"> </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 1,564.00 </td> <td align="right"> 1,561.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2011/12/24 12:50:38 </td> <td align="center"> 审核通过 </td> <td align="center"> senpy </td> <td align="center"> 2012/1/11 16:29:16 </td> <td align="left"> qqqqq </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=8"> lend02</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril2 </td> <td align="center"> 红宝支行 平安银行 </td> <td align="center"> </td> <td align="center"> 12345678901 </td> <td align="right"> 8,990.00 </td> <td align="right"> 8,987.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/1/22 9:51:58 </td> <td align="center"> 用户撤回 </td> <td align="center"> </td> <td align="center"> </td> <td align="left"> </td> <td align="center"> - </td> </tr> <tr class="tr2"> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> qq 中国工商银行 </td> <td align="center"> </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 60.00 </td> <td align="right"> 57.00 </td> <td align="right"> 3.00 </td> <td align="center"> 2012/1/17 14:42:52 </td> <td align="center"> 审核失败 </td> <td align="center"> 小周 </td> <td align="center"> 2012/1/27 11:14:43 </td> <td align="left"> ok </td> <td align="center"> - </td> </tr> <tr> <td align="center"> <a target="_blank" href="/login/user/user_info.aspx?userid=3"> lend01</a> <span style="color: #bbb">(正常)</span> </td> <td align="center"> cyril </td> <td align="center"> qq 中国工商银行 </td> <td align="center"> </td> <td align="center"> 6222023602022870901 </td> <td align="right"> 45,232.00 </td> <td align="right"> 45,227.00 </td> <td align="right"> 5.00 </td> <td align="center"> 2012/1/2 9:57:32 </td> <td align="center"> 审核失败 </td> <td align="center"> 小周 </td> <td align="center"> 2012/1/27 11:37:37 </td> <td align="left"> ok </td> <td align="center"> - </td> </tr> </tbody> </table> </div> </asp:Content>
参考:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> <style type="text/css"> #scroll_table{ height:100px; overflow:auto;} table{border-collapse:collapse; } table thead{background-color:#FFFFFF} th,td{border:1px solid #CCC} #thead{ position:fixed; z-index:100;background-color:#FFF} .w_100{ width:100px;} .w_60{ width:60px;} </style> </head> <body> <div id="scroll_table"> <table id="data_table"> <thead> <tr><th class="w_100">固定表头1</th><th class="w_100">固定表头2</th><th class="w_60">表头3</th><th class="w_60">表头4</th><th class="w_60">表头5</th><th class="w_60">表头4</th><th class="w_60">表头5</th><th class="w_60">表头4</th></tr> </thead> <tbody> <tr><td class="w_100">固定表头1-1</td><td class="w_100">固定表头2</td><td class="w_60">表头3</td><td class="w_60">表头4</td><td class="w_60">表头5</td><td class="w_60">表头4</td><td class="w_60">表头5</td><td class="w_60">表头4</td></tr> <tr><td>固定表头1-2</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-3</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-4</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-5</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-6</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-7</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-8</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-9</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-10</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-11</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-12</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> <tr><td>固定表头1-13</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr> </tbody> </table> </div> </body> <script> $(function(){ var browser_version=$.browser.version; $("#scroll_table").scroll(function(e) { if($(this).scrollTop()>0) { if($("#thead").length==0) { var thead=$('<table id="thead">'+$("table thead").html()+'</table>'); $("#scroll_table").prepend(thead); } else if('6.0'==browser_version||'7.0'==browser_version) { $("#thead").css("position","relative"); $("#thead").css("top",$(this).scrollTop()); } } else { $("#thead").remove(); } }); }); </script> </html>
