今天小编跟大家讲解下有关表格的头部固定效果通过css及jquery分别实现 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关表格的头部固定效果通过css及jquery分别实现 的相关资料，希望小伙伴们看了有所帮助。
1.第一种方式利用css的样式来实现表格的头部固定 复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=GB2312"/> <title>无标题文档</title> <style type="text/css"> .a{ position:relative; top:expression(this.offsetParent.scrollTop); //这里的offsetParent是最近的有固定样式的父级元素,原理就是不断的刷新相对于该父级元素的scrollTop来实现头部固定 background:blue; text-align:center; z-index:10; } .mainDIV{ overflow:scroll; height:100px; } </style> </head> <body> <div class="mainDIV"> <table cellpadding="0"id="tab1"cellspacing="0"border="1"class="itemList"> <thead> <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold; padding: 0px 0px 0px 0px;"class="a"> <td> 列1</td> <td> 列2</td> <td> 列3 </td> <td> 列4</td> </tr> </thead> <tbody> ... 2.第二种方法是用jquery把原来table的头隐藏,然后复制出一个一模一样的然后insertBefore到table前面 indes.html测试页面 复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/> <title>[email protected]_jQuery实现表头固定效果（挺不错的！！！）</title> <script src="https://www.aidi.net.cn//css/jquery-1.4.js"type="text/javascript"></script> <script src="https://www.aidi.net.cn//css/jquery.remainHead.js"type="text/javascript"></script> <style type="text/css"> .itemList { border: solid 1px #cccccc; overflow: hidden width: 100%; border-collapse: collapse; } .itemList td { padding: 0px 0px 0px 0px; color: #444444; border: solid 1px #cccccc; text-align: center; line-height: 20px; } </style> <script type="text/javascript"> $(function() { $.remainHead("tab1","div1"); }); </script> </head> <body> <form id="form1"runat="server"> <div style="height: 250px; overflow:scroll;"id="div1"> <table cellpadding="0"id="tab1"cellspacing="0"border="1"class="itemList"> <thead> <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold; padding: 0px 0px 0px 0px;"> <td> 列1</td> <td>列2 </td> <td> 列3</td> <td> 列4</td> </tr> </thead> <tbody> <tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr> .... jquery.remainHead.js 页面 复制代码代码如下: ;(function($){ $.extend({ //原理就是把原来的头给隐藏掉了,然后复制一个头出来插入到table的上面来实现头部固定"remainHead":function(tableId,tableParentDivId){ var obj = document.getElementById("tableHeaderDiv"+ tableId); if (obj) { jQuery(obj).remove(); } var browserName = navigator.appName; var ver = navigator.appVersion; var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows"))); var content = document.getElementById(tableParentDivId); var scrollWidth = content.offsetWidth - content.clientWidth; var tableOrg = jQuery("#"+ tableId) var table = tableOrg.clone(); table.attr("id","cloneTable"); var tableClone = jQuery(tableOrg).find("tr").each(function() { }); var tableHeader = jQuery(tableOrg).find("thead"); var tableHeaderHeight = tableHeader.height(); tableHeader.hide(); var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() { return jQuery(this).width(); }); //alert(colsWidths.get().join(","));用get()可以获取数组的dom元素 var tableCloneCols = jQuery(table).find("thead tr:first td") if (colsWidths.size() > 0) { for (i = 0; i < tableCloneCols.size(); i++) { if (i == tableCloneCols.size() - 1) { if (browserVersion == 8.0) tableCloneCols.eq(i).width(colsWidths[i] + scrollWidth); else tableCloneCols.eq(i).width(colsWidths[i]); } else { tableCloneCols.eq(i).width(colsWidths[i]); } } } var headerDiv = document.createElement("div"); headerDiv.appendChild(table[0]); jQuery(headerDiv).css("height", tableHeaderHeight); jQuery(headerDiv).css("overflow","hidden"); jQuery(headerDiv).css("z-index","20"); jQuery(headerDiv).css("width","100%"); jQuery(headerDiv).attr("id","tableHeaderDiv"+ tableId); jQuery(headerDiv).insertBefore(tableOrg.parent()); } }); })(jQuery);来源：爱蒂网
