/* $(document).ready(function () { var maxH = ($(window).height() - $("#divParent").position().top - 6); $("#divParent").css("height", maxH + "px").css("max-width", $("#tb1").width() + "px"); $.CreateFixedTableThead(document.getElementById("tbThead"), true); $.CreateFixedTableThead(document.getElementById("tbDeatil"), true); }); */ (function (a) { a.CreateFixedTableThead = function (useTable, doNotSetParentDiv) { if (!useTable) return; var fixedDivId = $(useTable).attr("id") + "mytable1111"; if (document.getElementById(fixedDivId)) { $("#" + fixedDivId).css("width", ($(useTable).width() + 2) + "px"); return; } //var newObject = $(useTable).find("thead"); useTable = $(useTable); //useTable.css("max-height","400px"); var newObject, newTheadDiv, useTableParent; newObject = useTable.clone(); newObject.attr("id", fixedDivId).attr("width", "100%").css("width", "100%"); //.removeAttr("width"); //.css({ 'margin-right': 0, 'margin-left': 0 }); newObject.find("tbody").remove(); if (newObject.find("tr").length <= 0) { newObject.html(useTable.find(".trcss")); } useTableParent = useTable.parent(); //$(this).height() if (!useTableParent) { return; } var trLength = newObject.find("tr").length; //================设置表外层格式 开始================================================ if (!doNotSetParentDiv) { //useTable.find("tr").height() var maxH = ($(window).height() - useTableParent.position().top - 6), winWidth = $(window).width(); if ($.browser.msie) { maxH = maxH - 14; } //设置父级div的position 值 //useTableParent.css("position", "relative"); //{position:'relative',overflow-y:'auto',max-height:400} useTableParent.css({ "position": 'relative', "overflow-y": 'auto', "max-height": maxH + "px" }); if (winWidth < useTableParent.width() || winWidth < useTable.width()) { //当表格宽度大于界面时设置 横向滚动条。 if (useTableParent.css("max-width") == "none" || useTableParent.css("max-width") == "") { useTableParent.css("max-width", $(window).width() + "px").css("overflow-x", "auto"); $("body").css("overflow-x", "hidden"); if ($.browser.msie) { maxH = maxH - 20; } useTableParent.css("max-height", (maxH) + "px"); } } } //================设置表外层格式 结束================================================ //position: absolute; newTheadDiv = $("<div style='position:fixed;left:0px;z-index:10;'></div>"); newTheadDiv.css("width", (useTable.width() + 2) + "px") .css("top", useTableParent.position().top + "px"); if (trLength > 1) { newTheadDiv.css("left", ""); } //.css("margin-left", useTable.css("margin-left")); newTheadDiv.append(newObject); useTableParent.append(newTheadDiv); var tdArr = $(newObject).find("tr:first td,th"); useTable.find("tr:first").find("th,td").each(function (index, obj) { $(tdArr[index]).css("width", $(obj).width() + "px"); }); $(window).resize(function () { newTheadDiv.css("width", (useTable.width() + 2) + "px"); var tdArr = $(newObject).find("tr:first td,th"); useTable.find("tr:first").find("th,td").each(function (index, obj) { $(tdArr[index]).css("width", $(obj).width() + "px"); }); }); $(useTableParent).scroll(function () { var leval = $(this).scrollLeft(); if (leval == 0) { $(newTheadDiv).css("left", ""); } else { leval = leval; $(newTheadDiv).css("left", "-" + leval + "px"); } }); }; })(jQuery);
方法二:
<thead> <tr style="position: relative;top: expression((this.offsetParent.scrollTop>this.parentElement.parentElement.offsetTop?this.offsetParent.scrollTop-this.parentElement.parentElement.offsetTop-38:0)-1);"> <th class="tdcss" onclick="sortAble('tb',0,'int')"> 房间资料分析 </th> <th class="tdcss" colspan="4" onclick="sortAble('tb',1,'int')"> 本日统计 </th> <th class="tdcss" colspan="4" onclick="sortAble('tb',2,'int')"> 本月统计 </th> <th class="tdcss" colspan="4" onclick="sortAble('tb',3,'int')"> 本年统计 </th> </tr> </thead>
主要是此段代码:
<tr style="position: relative;top: expression((this.offsetParent.scrollTop>this.parentElement.parentElement.offsetTop?this.offsetParent.scrollTop-this.parentElement.parentElement.offsetTop-38:0)-1);" >
至少兼容IE8