Simple jQuery Plugin To Freeze Header Row In Table - freezeheader

freezeheader is a super simple jQuery plugin that allows you to create a table with sticky header and scroll bar. You can also use this plugin to create a table with fixed header in the top browser.

Related plugins:

• jQuery Plugin For Sticky Table Header

How to use it:

1. Include jQuery library and jQuery freezeheader on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.freezeheader.js"></script>

2. Create a standard html table

<table class="gridView" id="demo">

<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
</tr>
</thead>

<tbody>

<tr class="grid">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>

<tr class="grid">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>

...

</tbody>

</table>

3. Call the plugin with height option

$(document).ready(function () {
  $("#demo").freezeHeader({ 
    'height': '300px' 
  });
})

Change logs:

2017-01-06

• Add support to Grid controls for ASP.NET Core projects 

2017-01-03

• Add functionality to Float the header XX pixels down the page

2015-07-19

• Update jquery.freezeheader.js

2014-11-05

• Add option that allows user to specify DOM element to listen for scroll events so it's not always tied to window

---

This awesome jQuery plugin is developed by laertejjunior. For more Advanced Usages, please check the demo page or visit the official website.