My Projects

Freeze Header


Freeze Header is a jQuery plugin that allows you to “freeze panes” like in Excel. It keeps the table header visible if the top of the table is scrolled out of view. By default it will freeze the top header, but it can also freeze the left-most column.

Download Freeze Header

The easiest way to understand what the plugin does is to check out the demo page:

Freeze Header Demo

To use it, simply include the following lines in your HTML page:

<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.freezeheader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("table").freezeHeader();
});
</script>


Options

Freeze Header has two options:
top - Freeze the <thead> in the table. Default: true.
left - Freeze the first column in the table. Default: false.

$("table").freezeHeader({ top: true, left: true });


Limitations and caveats

  • Requires jQuery version 1.5.1.
  • Assumes that the table will have <thead> and <tbody> elements.
  • Assumes that only <th> elements are used in the <thead>.
  • Setting a left margin on the table itself breaks the offset calculations. Wrap the table in a <div> and set the margin on the <div> instead.
  • Freeze Header works by inserting divs into the table cells to measure and set the dimensions, so it may break stylesheet rules that target divs within a td or th.
IE8 support is somewhat weak:
  • The frozen headers are not pixel-perfect.
  • Performance is sluggish.
  • Seems to require that line-height is larger than font-size. The following seems to work well: body { font-size: 10pt; line-height: 14pt; }

Tested on:

  • Firefox 3.6.13
  • Chrome 11.0.672.2 dev
  • Safari 5.0.3
  • Internet Explorer 8
  • Internet Explorer 9

Version History

  • 2011-02-20: 0.6.0 - Initial release
  • 2012-07-25: No change, but updated dependency to jQuery 1.5.1 to support IE9