web开发：表头固定（利用jquery实现）

表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美，趁着动手学习写jquery插件的机会，自己写了一个表头固定的插件。

使用方式和jquery-ui中的插件一样，只需要一行代码 $('#table1').fixHeader({height:100});

下列浏览器测试通过
IE7 IE8 IE9 firefox16.0 chrome22.0

说明：
1 需要jquery，开发测试用的jquery-1.8.2，其他版本应该不大
2 表头部分的<tr>需要写在<thead>里
3 不限定宽度情况下，自动适应表格宽度（假设滚动条宽度为20px，实际宽度为表格宽度+20px）
4 支持多行表头固定
5 通常表格所有列都显示，无横向滚动条，只需要竖向滚动条的功能。该插件支持限定宽度条件下的表头固定。
6 限定宽度和高度的条件下固定表头显示时，表头固定功能无法单纯通过css来实现，需要通过js实现，会有轻微闪烁
7 已经考虑table和th，td的border-width设置成不同值的情况
8 已经考虑了表头中绑定的事件，原表头中绑定的事件仍然保留。注意：先绑定事件，再调用本函数

View Code /*! * fixHeader 1.0.1 * Copyright 2012  chokobo *  * make table header fixed *  * notice: set th,id border-width in IE * * tested browser: IE7 IE8 IE9 firefox16.0 chrome22.0 */(function( $, undefined ) {$.fn.fixHeader = function(options){    var defaults = {        width: '',        height: ''    };    options = $.extend({}, defaults, options);    var elem = this;    if(options.height == ''){        return this;    }    var thead = elem.find('thead');    var fixTable = elem.clone().empty().removeAttr('id');    //set head default background-color    if(fixTable.css('background-color') == 'transparent' || fixTable.css('background-color') == ''){        fixTable.css('background-color', '#fff');    }    fixTable.css({        'position': 'absolute',        'top': '0px',        'border-bottom': $('tr:eq(0)', thead).find('th:eq(0), td:eq(0)').css('border-bottom-width')    });    $('tr:eq(0)', thead).find('th, td').each(function(){        var col = $(this);        if($.browser.mozilla){            col.width(col.width());        }        else if($.browser.chrome){            var colBorderWidth = parseInt(col.css('border-right-width'));            if(colBorderWidth){                col.width(col.width()+colBorderWidth);            }            else{                col.width(col.width());            }        }        else if($.browser.msie){            var colBorderWidth = parseInt(col.css('border-right-width'));            if(colBorderWidth){                col.width(col.width()+colBorderWidth+colBorderWidth/2);            }            else{                col.width(col.width());            }        }        else{            var colBorderWidth = parseInt(col.css('border-right-width'));            if(colBorderWidth){                col.width(col.width()+colBorderWidth);            }            else{                col.width(col.width());            }        }    });    //make head    var dummyHead = thead.clone();    thead.appendTo(fixTable);    dummyHead.prependTo(elem);    var tbodyWrapper = elem.wrap('<div class="body-wrapper"></div>').parent();    var tableWrapper = tbodyWrapper.wrap('<div class="table-wrapper" style="position:relative;"/>').parent();    setTableWidth();    setWrapperSize();    fixTable.prependTo(tableWrapper);    return this;    function setTableWidth(){        if($.browser.mozilla){            elem.width(elem.width());            fixTable.css('width',elem.css('width'));        }        else if($.browser.chrome){            elem.width(elem.outerWidth());            fixTable.width(elem.outerWidth());        }        else if($.browser.msie){            elem.width(elem.outerWidth());            fixTable.width(elem.outerWidth());        }        else{            elem.width(elem.outerWidth());            fixTable.width(elem.outerWidth());        }    }    function setWrapperSize(){        var elemWidth = elem.outerWidth(true);        var elemHeight = elem.outerHeight(true);        var scrollBarWidth = 20;        if(options.width == ''){            tbodyWrapper.css({                'width': (elemWidth+scrollBarWidth) + 'px',                'height': options.height,                'overflow-x': 'hidden',                'overflow-y': 'auto'            });        }        else{            if(elemWidth <= options.width){                tbodyWrapper.css({                    'width': options.width+'px',                    'height': options.height,                    'overflow-x': 'hidden',                    'overflow-y': 'auto'                });            }            else{                tableWrapper.css({                        'width': options.width,                        'height': options.height,                        'overflow': 'auto'                });                tableWrapper.scroll(function(){                    fixTable.css('top',tableWrapper.scrollTop()+'px');                });            }        }    }};})( jQuery );