复制代码 代码如下:
(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('
');
$(".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('Expand table');
$("#"+$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);
页面调用如下:
复制代码 代码如下:
...
...
Check out this header | Look here's another one | Wow, look at me! |
---|---|---|
Some content goes in here | Praesent vitae ligula nec orci pretium vestibulum | Maecenas tempus dictum libero |
Quisque in wisi quis orci tincidunt fermentum | Mauris aliquet mattis metus | Etiam eu ante non leo egestas nonummy |
此方法IE和FF的兼容性都很好,推荐。
B:利用css滤镜实现,但FF不支持微软的东西,不兼容。DOM如下:
复制代码 代码如下:
列头 | 列头 | 列头 | ||||
---|---|---|---|---|---|---|
h1 | h2 | h3 | h4 | h5 | h6 | h7 |
a |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
b |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
c |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
C:最简单的方法当然是写2个table,用DIV的overflow-y:auto来实现,兼容性绝对没问题,麻烦之处在于2个table的对齐问题,另外用脚本赋予高度的话,需要加onresize()方法。DOM如下:
复制代码 代码如下:
列头 | 列头 | 列头 | ||||
---|---|---|---|---|---|---|
h1 | h2 | h3 | h4 | h5 | h6 | h7 |
a |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
b |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
c |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
a |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
b |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
c |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
d |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
e |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
f |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
g |
单元格2 | 单元格3 | 单元格4 | 单元格5 | 单元格6 | 单元格7 |
有时候最笨的方法也可能是最简单最好的方法,这样写的兼容性绝对安全,灵活性也不错。