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 |
|---|