Mr.StickyTableHeaders

(A very simple, very small jquery plugin: Makes all table headers sticky when scrolling. Weighs in at a whopping minified 1.26KB! :D )

* NOTE: There is a slight 1px issue with chrome on all the <th>'s. I have added in a bit of a hack to counter-act it by adding a pixel to each <th> width if the browser is chrome. This way the last <th> is 1px bigger than it should be but the rest line up.

I noticed this bug in a couple of other sticky header plugins which is why i attempted to write my own. If anyone has a better solution than the one I have come up with please let me know.

Instructions

1. This plug in requires jQuery. You can download jquery from here.
2. Download the minified (production) or un-minified (development) mrstickytableheaders script file
3. Upload the file to your website.
4. Add a link to the file after the jquery one
   eg:

   <script src="~/Scripts/mrstickytableheaders.min.js"></script>

5. Make sure you tables have a single <thead> tag and id on each table like the following:

               <table id="tableid">
                   <thead>
                       <tr>
                           <td>
                           <td>
                           etc...
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                           <td>
                           <td>
                           etc...
                       </tr>                    
                       <tr>
                           <td>
                           <td>
                           etc...
                       </tr>
                       etc...
                   </tbody>
               </table>
           

6. Add the following code to you page

               <script>
                   $(function(){
                       $('body').mrstickytableheaders();
                   });
               </script>
           

7. That's it, enjoy using Mr.StickyTableHeaders!

As always, if you have any questions or queries then feel free to ask someone else first :D

Big thanks

A big thanks to SyntaxHighlighter 3.0.83 for making my code look pretty

Donate or follow

If you feel the urge to buy me a beer or following me on twitter here are some buttons!