tbodyScroll jQuery plugin: demo
Download
$('.example1').tbodyScroll({
thead_height: '30px',
tbody_height: '60px',
tfoot_height: '20px',
head_bgcolor: 'transparent',
foot_bgcolor: 'transparent'
});
some header |
other header |
some 1 |
other 1 |
some 2 |
other 2 |
some 3 |
other 3 |
some 4 |
other 4 |
some 5 |
other 5 |
some footer |
other footer |
$('.example2').tbodyScroll({
thead_height: '30px',
tbody_height: '60px',
tfoot_height: '20px',
});
some header |
other header |
some 1 |
other 1 |
some 2 |
other 2 |
some 3 |
other 3 |
some 4 |
other 4 |
some 5 |
other 5 |
some footer |
other footer |
$('.example3').tbodyScroll({
thead_height: '30px',
tbody_height: '60px',
tfoot_height: '20px',
head_bgcolor: 'blue',
foot_bgcolor: 'transparent'
});
.example3 { border-collapse: collapse; }
some header |
other header |
some 1 |
other 1 |
some 2 |
other 2 |
some 3 |
other 3 |
some 4 |
other 4 |
some 5 |
other 5 |
some footer |
other footer |
$('.example4').tbodyScroll({
thead_height: '30px',
tbody_height: '60px',
tfoot_height: '20px',
});
.example4 { border-collapse: collapse; }
.example4 thead th { background-color: blue; }
.example4 tfoot th { background-color: green; }
some header |
other header |
some 1 |
other 1 |
some 2 |
other 2 |
some 3 |
other 3 |
some 4 |
other 4 |
some 5 |
other 5 |
some footer |
other footer |
$('.example5').tbodyScroll({
thead_height: '30px',
tbody_height: '60px',
tfoot_height: '20px',
});
.example5 th { background-color: transparent; }
div.outer { float: left; border: 2px solid red; }
some header |
other header |
some 1 |
other 1 |
some 2 |
other 2 |
some 3 |
other 3 |
some 4 |
other 4 |
some 5 |
other 5 |
some footer |
other footer |