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 )

Fork me on GitHub

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

Name Age Height Weight DOB
Barney 56 14.2 84 1984-04-14T14:48:00
Barry 18 12.9 73 April 15, 1984
Bart 3 16.6 96 Mon, 13 April 1984 14:48:00 GMT
Bartholomew 54 12.9 73 April 12, 1984
Ben 52 14.2 84 1984-04-11T14:48:00
Benedict 78 16.6 96 Mon, 10 April 1984 14:48:00 GMT
Benjamin 67 12.9 73 April 9, 1984
Bernard 34 14.2 84 1984-04-08T14:48:00
Bill 24 16.6 96 Mon, 16 April 1984 14:48:00 GMT
Blake 54 16.6 96 Mon, 7 April 1984 14:48:00 GMT
Bob 14 14.2 84 1984-04-17T14:48:00
Boris 66 12.9 73 April 6, 1984
Brad 88 14.2 84 1984-04-05T14:48:00
Braden 90 16.6 96 Mon, 4 April 1984 14:48:00 GMT
Bradley 103 12.9 73 April 3, 1984
Brody 16 14.2 84 1984-04-02T14:48:00

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!

Follow @Matching_Radar