jqgrid 点击表头排序三级以上表头怎么设置
点击联系发帖人
时间：2016-03-21 10:29
基于jquery的表头固定的若干方法
字体：[ ] 类型：转载 时间：
如果Table数据过多，页面必然会拉的很长，固定表头，可以方便用户对照表头项目列表。近日做后台界面时，整理固定表头三种方法
A:使用JQuery UI插件，用DIV替换table，overflow-y:hidden达到滚动，让 thead绝对定位达到固定的目的，方法如下：
代码如下: (function($){ $.chromatable = { defaults: { width: "900px", height: "300px", scrolling: "yes" } }; $.fn.chromatable = function(options){ var options = $.extend({}, $.chromatable.defaults, options); return this.each(function(){ var $this = $(this); var $uniqueID = $(this).attr("ID") + ("wrapper"); $(this).css('width', options.width).addClass("_scrolling"); $(this).wrap('&div class="scrolling_outer"&&div id="'+$uniqueID+'" class="scrolling_inner"&&/div&&/div&'); $(".scrolling_outer").css({'position':'relative'}); $("#"+$uniqueID).css( {'border':'1px solid #CCCCCC', 'overflow-x':'hidden', 'overflow-y':'auto', 'padding-right':'17px' }); $("#"+$uniqueID).css('height', options.height); $("#"+$uniqueID).css('width', options.width); $(this).before($(this).clone().attr("id", "").addClass("_thead").css( {'width' : 'auto', 'display' : 'block', 'position':'absolute', 'border':'none', 'border-bottom':'1px solid #CCC', 'top':'1px' })); $('._thead').children('tbody').remove(); $(this).each(function( $this ){ if (options.width == "100%" || options.width == "auto") { $("#"+$uniqueID).css({'padding-right':'0px'}); } if (options.scrolling == "no") { $("#"+$uniqueID).before('&a href="#" class="expander" style="width:100%;"&Expand table&/a&'); $("#"+$uniqueID).css({'padding-right':'0px'}); $(".expander").each( function(int){ $(this).attr("ID", int); $( this ).bind ("click",function(){ $("#"+$uniqueID).css({'height':'auto'}); $("#"+$uniqueID+" ._thead").remove(); $(this).remove(); }); }); $("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden"); } }); $curr = $this.prev(); $("thead:eq(0)&tr th",this).each( function (i) { $("thead:eq(0)&tr th:eq("+i+")", $curr).width( $(this).width()); }); if (options.width == "100%" || "auto"){ $(window).resize(function(){ resizer($this); }); } }); }; function resizer($this) { $curr = $this.prev(); $("thead:eq(0)&tr th", $this).each( function (i) { $("thead:eq(0)&tr th:eq("+i+")", $curr).width( $(this).width()); }); }; })(jQuery);
页面调用如下：
代码如下: ... &script type="text/javascript" src="jquery-ui-min.js"&&/script& &script& $(function(){ $("#yourTableID").chromatable({ width: "900px", height: "400px", scrolling: "yes" }); }); &/script& ... &table id="yourTableID" width="100%" border="0" cellspacing="0" cellpadding="0"& &thead& &tr& &th&Check out this header&/th& &th&Look here's another one&/th& &th&Wow, look at me!&/th& &/tr& &/thead& &tbody& &tr& &td&Some content goes in here&/td& &td&Praesent vitae ligula nec orci pretium vestibulum&/td& &td&Maecenas tempus dictum libero&/td& &/tr& ... &tr& &td&Quisque in wisi quis orci tincidunt fermentum&/td& &td&Mauris aliquet mattis metus&/td& &td&Etiam eu ante non leo egestas nonummy&/td& &/tr& &/tbody& &/table&
此方法IE和FF的兼容性都很好，推荐。 B：利用css滤镜实现，但FF不支持微软的东西，不兼容。DOM如下：
代码如下: &!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"& &HTML& &HEAD& &TITLE& New Document &/TITLE& &/HEAD& &style type="text/css"& &!-- body,table, td, a {font:9} /*重点：固定行头样式*/ .scrollRowThead{position: left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft); z-index:0;} /*重点：固定表头样式*/ .scrollColThead {position:top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2; height:20} /*行列交叉的地方*/ .scrollCR { z-index:3;} /*div外框*/ .scrollDiv {height:200clear: border: 1px solid #EEEEEE;OVERFLOW:width: 500 } /*行头居中*/ .scrollColThead td,.scrollColThead th { text-align:} /*行头列头背景*/ .scrollRowThead,.scrollColThead td,.scrollColThead th {background-color:EEEEEE; height:20} /*表格的线*/ .scrolltable{ border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; } /*单元格的线等*/ .scrolltable td,.scrollTable th{ border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5 } --& &/style& &BODY& &!--&div class="scrollDiv" id="scrollDiv"&--& &table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"& &tr class="scrollColThead" & &th class="scrollRowThead scrollCR" & &/th& &th colspan="2"&列头&/th& &th colspan="2"&列头&/th& &th colspan="2"&列头&/th& &/tr& &tr class="scrollColThead" & &th class="scrollRowThead scrollCR" &h1&/th& &th class="scrollRowThead scrollCR"&h2&/th& &th class="scrollRowThead scrollCR"&h3&/th& &th class="scrollRowThead scrollCR"&h4&/th& &th class="scrollRowThead scrollCR"&h5&/th& &th class="scrollRowThead scrollCR"&h6&/th& &th class="scrollRowThead scrollCR"&h7&/th& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox" value="checkbox"& a&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox2" value="checkbox"& b&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td nowrap class="scrollRowThead" & &input type="checkbox" name="checkbox3" value="checkbox"& c&/td& &td nowrap&单元格2&/td& &td nowrap&单元格3&/td& &td nowrap&单元格4&/td& &td nowrap&单元格5&/td& &td nowrap&单元格6&/td& &td nowrap&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &/table& &/BODY& &/HTML&
C:最简单的方法当然是写2个table，用DIV的overflow-y:auto来实现，兼容性绝对没问题，麻烦之处在于2个table的对齐问题，另外用脚本赋予高度的话，需要加onresize()方法。DOM如下：
代码如下: &!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& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /& &title&无标题文档&/title& &style& *,body,form,ul,li,p,h1,h2,h3,h4,h5,h6 {margin:0padding:0} body, td, th, input, select,p,span{font-family:"微软雅黑",Arial, Helvetica, sans-} body,td,div{font-size:12color:#333; line-height:150%;-webkit-text-size-adjust:} select{ font-size:12} a {blr:expression(this.onFocus=this.blur()); font-family:"微软雅黑",Arial, Helvetica, sans- font-size:12 } a:link, a:visited {text-decoration:color:#333;} a:hover, a:active {text-decoration:color:#F00;} ul,li,ol{list-style-type:}img {border:} html{ overflow:} .header{ width:1000 margin: height:40 background:#} .mainer{ width:1000 margin: height: overflow-y:overflow-x:} &/style& &script src="jquery-1.4.2.min.js" type="text/javascript"&&/script& &script type="text/javascript"& function OnResize() { $(".mainer").height($(window).height() - 40); } $(function () { onreszie(); }); &/script& &/head& &body onResize="OnResize()"& &div class="header"& &table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"& &thead& &tr & &th & &/th& &th colspan="2"&列头&/th& &th colspan="2"&列头&/th& &th colspan="2"&列头&/th& &/tr& &tr & &th &h1&/th& &th &h2&/th& &th &h3&/th& &th &h4&/th& &th &h5&/th& &th &h6&/th& &th &h7&/th& &/tr& &/thead& &/table& &/div& &div class="mainer"& &table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"& &tbody& &tr& &td & &input type="checkbox" name="checkbox" value="checkbox"& a&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox2" value="checkbox"& b&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td nowrap & &input type="checkbox" name="checkbox3" value="checkbox"& c&/td& &td nowrap&单元格2&/td& &td nowrap&单元格3&/td& &td nowrap&单元格4&/td& &td nowrap&单元格5&/td& &td nowrap&单元格6&/td& &td nowrap&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox" value="checkbox"& a&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox2" value="checkbox"& b&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td nowrap & &input type="checkbox" name="checkbox3" value="checkbox"& c&/td& &td nowrap&单元格2&/td& &td nowrap&单元格3&/td& &td nowrap&单元格4&/td& &td nowrap&单元格5&/td& &td nowrap&单元格6&/td& &td nowrap&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &/tbody& &/table& &/div& &/body& &/html&
有时候最笨的方法也可能是最简单最好的方法，这样写的兼容性绝对安全，灵活性也不错。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}
字体：[ ] 类型：转载 时间：
如果Table数据过多，页面必然会拉的很长，固定表头，可以方便用户对照表头项目列表。近日做后台界面时，整理固定表头三种方法
A:使用JQuery UI插件，用DIV替换table，overflow-y:hidden达到滚动，让 thead绝对定位达到固定的目的，方法如下：
代码如下: (function($){ $.chromatable = { defaults: { width: "900px", height: "300px", scrolling: "yes" } }; $.fn.chromatable = function(options){ var options = $.extend({}, $.chromatable.defaults, options); return this.each(function(){ var $this = $(this); var $uniqueID = $(this).attr("ID") + ("wrapper"); $(this).css('width', options.width).addClass("_scrolling"); $(this).wrap('&div class="scrolling_outer"&&div id="'+$uniqueID+'" class="scrolling_inner"&&/div&&/div&'); $(".scrolling_outer").css({'position':'relative'}); $("#"+$uniqueID).css( {'border':'1px solid #CCCCCC', 'overflow-x':'hidden', 'overflow-y':'auto', 'padding-right':'17px' }); $("#"+$uniqueID).css('height', options.height); $("#"+$uniqueID).css('width', options.width); $(this).before($(this).clone().attr("id", "").addClass("_thead").css( {'width' : 'auto', 'display' : 'block', 'position':'absolute', 'border':'none', 'border-bottom':'1px solid #CCC', 'top':'1px' })); $('._thead').children('tbody').remove(); $(this).each(function( $this ){ if (options.width == "100%" || options.width == "auto") { $("#"+$uniqueID).css({'padding-right':'0px'}); } if (options.scrolling == "no") { $("#"+$uniqueID).before('&a href="#" class="expander" style="width:100%;"&Expand table&/a&'); $("#"+$uniqueID).css({'padding-right':'0px'}); $(".expander").each( function(int){ $(this).attr("ID", int); $( this ).bind ("click",function(){ $("#"+$uniqueID).css({'height':'auto'}); $("#"+$uniqueID+" ._thead").remove(); $(this).remove(); }); }); $("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden"); } }); $curr = $this.prev(); $("thead:eq(0)&tr th",this).each( function (i) { $("thead:eq(0)&tr th:eq("+i+")", $curr).width( $(this).width()); }); if (options.width == "100%" || "auto"){ $(window).resize(function(){ resizer($this); }); } }); }; function resizer($this) { $curr = $this.prev(); $("thead:eq(0)&tr th", $this).each( function (i) { $("thead:eq(0)&tr th:eq("+i+")", $curr).width( $(this).width()); }); }; })(jQuery);
页面调用如下：
代码如下: ... &script type="text/javascript" src="jquery-ui-min.js"&&/script& &script& $(function(){ $("#yourTableID").chromatable({ width: "900px", height: "400px", scrolling: "yes" }); }); &/script& ... &table id="yourTableID" width="100%" border="0" cellspacing="0" cellpadding="0"& &thead& &tr& &th&Check out this header&/th& &th&Look here's another one&/th& &th&Wow, look at me!&/th& &/tr& &/thead& &tbody& &tr& &td&Some content goes in here&/td& &td&Praesent vitae ligula nec orci pretium vestibulum&/td& &td&Maecenas tempus dictum libero&/td& &/tr& ... &tr& &td&Quisque in wisi quis orci tincidunt fermentum&/td& &td&Mauris aliquet mattis metus&/td& &td&Etiam eu ante non leo egestas nonummy&/td& &/tr& &/tbody& &/table&
此方法IE和FF的兼容性都很好，推荐。 B：利用css滤镜实现，但FF不支持微软的东西，不兼容。DOM如下：
代码如下: &!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"& &HTML& &HEAD& &TITLE& New Document &/TITLE& &/HEAD& &style type="text/css"& &!-- body,table, td, a {font:9} /*重点：固定行头样式*/ .scrollRowThead{position: left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft); z-index:0;} /*重点：固定表头样式*/ .scrollColThead {position:top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2; height:20} /*行列交叉的地方*/ .scrollCR { z-index:3;} /*div外框*/ .scrollDiv {height:200clear: border: 1px solid #EEEEEE;OVERFLOW:width: 500 } /*行头居中*/ .scrollColThead td,.scrollColThead th { text-align:} /*行头列头背景*/ .scrollRowThead,.scrollColThead td,.scrollColThead th {background-color:EEEEEE; height:20} /*表格的线*/ .scrolltable{ border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; } /*单元格的线等*/ .scrolltable td,.scrollTable th{ border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5 } --& &/style& &BODY& &!--&div class="scrollDiv" id="scrollDiv"&--& &table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"& &tr class="scrollColThead" & &th class="scrollRowThead scrollCR" & &/th& &th colspan="2"&列头&/th& &th colspan="2"&列头&/th& &th colspan="2"&列头&/th& &/tr& &tr class="scrollColThead" & &th class="scrollRowThead scrollCR" &h1&/th& &th class="scrollRowThead scrollCR"&h2&/th& &th class="scrollRowThead scrollCR"&h3&/th& &th class="scrollRowThead scrollCR"&h4&/th& &th class="scrollRowThead scrollCR"&h5&/th& &th class="scrollRowThead scrollCR"&h6&/th& &th class="scrollRowThead scrollCR"&h7&/th& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox" value="checkbox"& a&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox2" value="checkbox"& b&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td nowrap class="scrollRowThead" & &input type="checkbox" name="checkbox3" value="checkbox"& c&/td& &td nowrap&单元格2&/td& &td nowrap&单元格3&/td& &td nowrap&单元格4&/td& &td nowrap&单元格5&/td& &td nowrap&单元格6&/td& &td nowrap&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td class="scrollRowThead" & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &/table& &/BODY& &/HTML&
C:最简单的方法当然是写2个table，用DIV的overflow-y:auto来实现，兼容性绝对没问题，麻烦之处在于2个table的对齐问题，另外用脚本赋予高度的话，需要加onresize()方法。DOM如下：
代码如下: &!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& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /& &title&无标题文档&/title& &style& *,body,form,ul,li,p,h1,h2,h3,h4,h5,h6 {margin:0padding:0} body, td, th, input, select,p,span{font-family:"微软雅黑",Arial, Helvetica, sans-} body,td,div{font-size:12color:#333; line-height:150%;-webkit-text-size-adjust:} select{ font-size:12} a {blr:expression(this.onFocus=this.blur()); font-family:"微软雅黑",Arial, Helvetica, sans- font-size:12 } a:link, a:visited {text-decoration:color:#333;} a:hover, a:active {text-decoration:color:#F00;} ul,li,ol{list-style-type:}img {border:} html{ overflow:} .header{ width:1000 margin: height:40 background:#} .mainer{ width:1000 margin: height: overflow-y:overflow-x:} &/style& &script src="jquery-1.4.2.min.js" type="text/javascript"&&/script& &script type="text/javascript"& function OnResize() { $(".mainer").height($(window).height() - 40); } $(function () { onreszie(); }); &/script& &/head& &body onResize="OnResize()"& &div class="header"& &table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"& &thead& &tr & &th & &/th& &th colspan="2"&列头&/th& &th colspan="2"&列头&/th& &th colspan="2"&列头&/th& &/tr& &tr & &th &h1&/th& &th &h2&/th& &th &h3&/th& &th &h4&/th& &th &h5&/th& &th &h6&/th& &th &h7&/th& &/tr& &/thead& &/table& &/div& &div class="mainer"& &table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"& &tbody& &tr& &td & &input type="checkbox" name="checkbox" value="checkbox"& a&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox2" value="checkbox"& b&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td nowrap & &input type="checkbox" name="checkbox3" value="checkbox"& c&/td& &td nowrap&单元格2&/td& &td nowrap&单元格3&/td& &td nowrap&单元格4&/td& &td nowrap&单元格5&/td& &td nowrap&单元格6&/td& &td nowrap&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox" value="checkbox"& a&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox2" value="checkbox"& b&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td nowrap & &input type="checkbox" name="checkbox3" value="checkbox"& c&/td& &td nowrap&单元格2&/td& &td nowrap&单元格3&/td& &td nowrap&单元格4&/td& &td nowrap&单元格5&/td& &td nowrap&单元格6&/td& &td nowrap&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox4" value="checkbox"& d&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox5" value="checkbox"& e&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox6" value="checkbox"& f&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &tr& &td & &input type="checkbox" name="checkbox7" value="checkbox"& g&/td& &td&单元格2&/td& &td&单元格3&/td& &td&单元格4&/td& &td&单元格5&/td& &td&单元格6&/td& &td&单元格7&/td& &/tr& &/tbody& &/table& &/div& &/body& &/html&
有时候最笨的方法也可能是最简单最好的方法，这样写的兼容性绝对安全，灵活性也不错。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}
我要回帖
更多关于 jqgrid 二级表头 的文章
更多推荐
- ·王润之画家多少钱一平尺简介
- ·中国我国的国防现状的历史演变过程，对于今天如何开展我国的国防现状的启示？
- ·老曹学美术到底有没有出路值得学吗?
- ·香港发达还是台湾发达是发达地区吗
- ·台湾哪年分割出去的是什么时间被侵占的？
- ·求极品高富帅全部2961章的txt下载
- ·怎么实现YUV叠加OSD 汉字字符叠加器
- ·求异形大战铁血战士32百度云谢谢
- ·谁有黑客软件百度云分享好吗
- ·求能告诉我我
- ·老司机求带谁有人类文明发展史的精神宝库
- ·求黑雪姬cosav云盘，感激不尽的意思
- ·内衣模特图片，怎么自己修改，并且可以自己添加自己产品的介绍，有什么软件可以做到，谢谢大家，拜托啦
- ·中国银行招聘笔试应该用什么资料复习求推荐？？英语怎么复习？其他的应该买什么复习资料？求推荐
- ·求姜鑫这个名字的霸气的句子女生版句子
- ·通缉警花老婆错上黑老大这本书在那个软件可以免费看
- ·电脑上下载的软件没有应用程序怎么安装
- ·优化产业结构结构出错，没提示在哪错的，求助
- ·大学精读2录音文件哪里找，哪位亲帮帮忙，十分感谢您的帮助
- ·jqgrid 点击表头排序三级以上表头怎么设置
- ·海信LED55EC290N能升级版本吗
- ·miui9.5稳定版75.9.26是什么手机
- ·索尼a7r2最新固件升级pmw-350是不是有版本升级
- ·金刚3蓝牙音箱用多少毫安音响充电器器
- ·空调机组制冷量62,3kw用多大的水管
- ·鱼台的oppor7卖多少钱？
- ·现货沥青中的杠杆是什么？
- ·手机关闭手机的省电模式怎么关闭在哪里
- ·三星s6手机掉菜汤里了怎么清里
- ·WS15是真的吗
- ·4k视频剪辑软件，特效渲染。电脑显卡到底是丽台k2200好还是gtx980好？
- ·压辊两端出现异常磨损的原因有哪些?如何避免?
- ·三星台式电脑n7280
