<script>
(function() {
var $container = $('.wxcep-table');
$container.css({
position: 'relative',
overflow: 'auto'
});
$container.find('table').css({
borderCollapse: 'collapse',
whiteSpace: 'nowrap'
})
var $head = $container.find('th');
var headTop = $head.position().top;
var $headcol2 = $head.filter(':lt(2)');
var $col = $container.find('td:first-child');
var colLeft = $col.position().left;
var $col2 = $container.find('td:nth-child(2)');
var colLeft2 = $col2.position().left;
$col.css({
backgroundColor: '#ffffff'
})
function moveBar() {
$this = $(this);
var newTop = $container.scrollTop() - headTop;
$head.css({
top: newTop < 0 ? 0 + 'px' : newTop + 'px'
})
}
function moveCol() {
$this = $(this);
var newLeft = $container.scrollLeft() - colLeft
$col.add($col2).add($headcol2).css({
left: newLeft < 0 ? 0 + 'px' : newLeft + 'px'
})
}
$head.css({
zIndex: 1000
})
$headcol2.css({
zIndex: 1200
});
$container.on('scroll', function() {
if($container.scrollLeft() >= colLeft) {
$col.add($col2).add($headcol2).css({
position: 'relative',
backgroundColor: '#ffffff',
});
$container.on('scroll', moveCol);
} else {
$col.add($col2).add($headcol2).css({
position: 'static'
});
$container.off('scroll', moveCol);
}
if($container.scrollTop() >= headTop) {
$head.css({
position: 'relative',
backgroundColor: '#ffffff',
});
$container.on('scroll', moveBar);
} else {
if($container.scrollLeft() < colLeft) {
$head.css({
position: 'static'
});
}
$container.off('scroll', moveBar);
}
});
})();
</script>css