Posted by & filed under Development.

Here we’ll use jQuery FreezeTable plugin to freeze the header and add a vertical scroll bar to a lengthly table.

The end result will look like this:
freezetableexample

Step 1: The HTML

<table id="mytable">
  <colgroup>
    <col class="column-make" />
    <col class="column-display" />
    <col class="column-country" />       
  </colgroup>
  <thead>
    <tr>
      <th>make_id</th>
      <th>make_display</th>
      <th>make_country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abarth</td>
      <td>Abarth</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

The table markup needs to adhere to the HTML 4.01 Specification for Tables. The row groups THEAD and TBODY are used to determine which sections of the table should be frozen. jquery.freezetable clones the table and removes the TBODY from the cloned copy to ‘freeze’ the header. It then removes the THEAD from the original table to make the scrollable portion of the table. jquery.freezetable also depends on COLGROUP to maintain consistent column styling between the orginal and cloned header table.

Step 2: The JavaScript

$(document).ready(function () {
    $('#mytable').freezeTable({
        'autoHeight': false,
        'height': 160
    });
});

Demo
AutoHeight Demo
Fixed height Demo
Interactive Demo on JSFIDDLE

Download
Download FreezeTable from GitHub

Leave a Reply

  • (will not be published)