$.fn.magicTab = function(){
this.each(function(){
var $t = $(this);
$t.find('th').each(function(){
$(this).css({
'width':$(this).css('width')
});
})
var thtm = $t.prop('outerHTML');
var $box = $t.parent();
var $topTab;
var $leftTab;
var temp;
$box.html( '<div class="scrllBox">' + thtm + '<div class="fixed">' + thtm + '</div>' + '<div class="leftTab">' + thtm + '</div><div class="topTab">' + thtm + '</div>' + '</div>' );
$oriTab = $('.scrllBox>table:first');
$topTab = $box.find('.topTab');
$leftTab = $box.find('.leftTab').css('height',$oriTab.height());
$fixed = $box.find('.fixed');
$topTab.children().add($leftTab.children()).add($fixed.children()).css({
width : $oriTab.width()
})
temp = 0;
$oriTab.find('th:lt(5)').each(function(){
temp += $(this).outerWidth();
})
$leftTab.add($fixed).css({width:temp})
$topTab.add($fixed).css({
height:$leftTab.find('th').outerHeight()
})
$box.children().on('scroll',function(){
var $t = $(this);
var top = $t.scrollTop();
var left = $t.scrollLeft();
var $topTab = $('.topTab');
if ( top > 0 ){
$leftTab.css({
marginTop:'-'+top+'px',
height:this.clientHeight+top + 'px'
});
} else if ( !top ){
$leftTab.css({
marginTop : 0,
height:this.clientHeight
});
}
if ( left > 0 ){
$topTab.css({
marginLeft:'-'+left+'px',
width:this.clientWidth+left + 'px'
});
} else if ( !left ){
$topTab.css({
marginLeft : 0,
width:this.clientWidth
})
}
})
})
}