首页 > 代码库 > 表头固定
表头固定
<!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> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <style type="text/css"> table th { background-color: Gray; } table tbody td { word-break: break-all; word-wrap: break-word; } </style> <script type="text/javascript"> /* * Auther:Mike.Jiang * Email: dataadapter@hotmail.com * Date: 2012-09-05 */ /* 主要思想: 1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中 2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置 */ (function ($) { $.fn.extend({ FixedHead: function (options) { var op = $.extend({ tableLayout: "auto" }, options); return this.each(function () { var $this = $(this); //指向当前的table var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV,这个DIV要自己手动加上去 $thisParentDiv.wrap("<div class=‘fixedtablewrap‘></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上,再加一个DIV var x = $thisParentDiv.position(); var fixedDiv = $("<div class=‘fixedheadwrap‘ style=‘clear:both;overflow:hidden;z-index:2;position:absolute;‘ ></div>") .insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV,此DIV用来包装tabelr的表头 .css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top }); var $thisClone = $this.clone(true); $thisClone.find("tbody").remove(); //复制一份table,并将tbody中的内容删除,这样就仅余thead,所以要求表格的表头要放在thead中 $thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中 $this.css({ "marginTop": 0, "table-layout": op.tableLayout }); //当前TABLE的父级DIV有水平滚动条,并水平滚动时,同时滚动包装thead的DIV $thisParentDiv.scroll(function () { fixedDiv[0].scrollLeft = $(this)[0].scrollLeft; }); //因为固定后的表头与原来的表格分离开了,难免会有一些宽度问题 //下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头 var $fixHeadTrs = $thisClone.find("thead tr"); var $orginalHeadTrs = $this.find("thead"); $fixHeadTrs.each(function (indexTr) { var $curFixTds = $(this).find("td"); var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")"); $curFixTds.each(function (indexTd) { $(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width()); }); }); }); } }); })(jQuery); $(document).ready(function () { $("#tbTest").FixedHead({ tableLayout: "fixed" }); }); </script> </head> <body> <div style="height: 200px; width: 400px; overflow: auto;"> <table id="tbTest" border="1" cellspacing="1" cellpadding="1" style="width: 500px;"> <thead> <tr> <th rowspan="2" style="width: 30%"> 项目 </th> <th colspan="2"> 常规性税金 </th> <th colspan="2"> 非常规性税金 </th> <th rowspan="2" style="width: 10%"> 工程税 </th> </tr> <tr> <th style="width: 15%"> 城建税 </th> <th style="width: 15%"> 教育费附加% </th> <th style="width: 15%"> 堤围防护费% </th> <th style="width: 15%"> 个人所得税% </th> </tr> </thead> <tbody> <tr> <td> 0.2 </td> <td> 11111111111111111.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> <tr> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> <td> 0.2 </td> </tr> </tbody> </table> </div> </body> </html>
表头固定
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。