jQuery plugin: add scrolling for table tbody element
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


tbodyScroll jQuery plugin

Add vertical scrollbar to <tbody> element and keep <thead> and <tfoot> contents above/below table while scrolling body.

Demo and examples.

Tested on:

  • jQuery 1.4.3
  • Opera 10.63/Linux
  • Opera 10.63/Windows
  • Firefox 3.6.12/Linux
  • Firefox 3.6.12/Windows
  • Safari 5.0.2/Mac
  • Chromium 7.0.517.41/Linux
  • IE 8/Windows


     thead_height:   '30px',
     tbody_height:   '80px',
     tfoot_height:   '20px',
     head_bgcolor:   'transparent',
     foot_bgcolor:   'transparent'

Required user CSS:

  • User must define same width for <th> and <td> in each column, because <thead> and <tfoot> will be "disconnected" from <tbody> and won't keep same width automatically anymore.
  • Some changes in user CSS may be needed because <table> will be wrapped by <div style="float:left">.

Required user markup (either <thead> or <tfoot> is optional):

    th.some,  td.some  { width: ...; }
    th.other, td.other { width: ...; }
    <tr><th class="some">...</th>
        <th class="other">...</th>
    <tr><td class="some">...</td>
        <td class="other">...</td>
    <tr><th class="some">...</th>
        <th class="other">...</th>

Generated markup:

<div class="tbodyScroll-outer">
    <div class="tbodyScroll-head-bg"></div>
    <div class="tbodyScroll-foot-bg"></div>
    <div class="tbodyScroll-inner">