Simple jQuery Plugin To Freeze Header Row In Table - freezeheader
File Size: | 85.5 KB |
---|---|
Views Total: | 91534 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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