-
-
Save flaviaza/3763015 to your computer and use it in GitHub Desktop.
Twitter bootstrap fixed table header using jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Here is a simple jQuery plugin to make a table header fixed on top of a div when this is scrolled. | |
| Using the code from twitter bootstrap documentation page, this code is customized for table header. | |
| Create the table with following layout - | |
| <div class="row fixed-table"> | |
| <div class="table-content"> | |
| <table class="table table-striped table-fixed-header" id="mytable"> | |
| <thead class="header"> | |
| <tr> | |
| <th>Email Address</th> | |
| <th>First Name</th> | |
| <th>Last Name</th> | |
| <th>Administrator</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| ... | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| Add the css from the file "table-fixed-header.css" | |
| To apply it to above table, call - | |
| $('.table-fixed-header').fixedHeader(); | |
| You need to assign a height value to ".table-content" into the css file. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Table Fixed Header</title> | |
| <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> | |
| <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> | |
| <!-- CSS and JS for table fixed header --> | |
| <link rel="stylesheet" href="table-fixed-header.css"> | |
| <script src="table-fixed-header.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <h1>Table Fixed Header</h1> | |
| </div> | |
| <div class="row fixed-table"> | |
| <div class="table-content"> | |
| <table class="table table-striped table-fixed-header" id="mytable"> | |
| <thead class="header"> | |
| <tr> | |
| <th>Email Address</th> | |
| <th>First Name</th> | |
| <th>Last Name</th> | |
| <th>Administrator</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| <tr> | |
| <td>admin@fakeadress.com</td> | |
| <td>firstname</td> | |
| <td>LastName</td> | |
| <td>Data Column 4</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script language="javascript" type="text/javascript" > | |
| $(document).ready(function(){ | |
| // add 30 more rows to the table | |
| var row = $('table#mytable > tbody > tr:first'); | |
| for (i=0; i<30; i++) { | |
| $('table#mytable > tbody').append(row.clone()); | |
| } | |
| // make the header fixed on scroll | |
| $('.table-fixed-header').fixedHeader(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .fixed-table .header-fixed { | |
| position: absolute; | |
| top: 0px; | |
| z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ | |
| border-bottom: 2px solid #d5d5d5; | |
| -webkit-border-radius: 0; | |
| -moz-border-radius: 0; | |
| border-radius: 0; | |
| } | |
| .fixed-table{ | |
| display:block; | |
| position:relative; | |
| } | |
| .fixed-table th{ | |
| padding: 8px; | |
| line-height: 18px; | |
| text-align: left; | |
| } | |
| .fixed-table .table-content{ | |
| display:block; | |
| position: relative; | |
| height: 500px; /*FIX THE HEIGHT YOU NEED*/ | |
| overflow-y: auto; | |
| } | |
| .fixed-table .header-copy{ | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| } | |
| .fixed-table .header-copy th{ | |
| background-color:#fff; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| $.fn.fixedHeader = function () { | |
| return this.each( function() { | |
| var o = $(this) | |
| , nhead = o.closest('.fixed-table'); | |
| var $head = $('thead.header', o); | |
| $head.clone().removeClass('header').addClass('header-copy header-fixed').appendTo(nhead); | |
| var ww = []; | |
| o.find('thead.header > tr:first > th').each(function (i, h){ | |
| ww.push($(h).width()); | |
| }); | |
| $.each(ww, function (i, w){ | |
| nhead.find('thead.header > tr > th:eq('+i+'), thead.header-copy > tr > th:eq('+i+')').css({width: w}); | |
| }); | |
| nhead.find('thead.header-copy').css({ margin:'0 auto', | |
| width: o.width()}); | |
| }); | |
| }; | |
| })(jQuery); |
My table is wide for the containing div and so the header that gets generated, hides the vertical scrollbar - http://jsfiddle.net/NWV73/4/
I am not able to get around this issue.
thanks!
You can simplify things even more if you copy the thead into a table with the same classes as the original (minus 'table-fixed-header'.) There is no need to have styling to match the header, since it then picks up anything the parent table has. Only absolute positioning needs to be specified:
https://gist.github.com/straydogstudio/5921932
Also, I have jquery adding the two surrounding divs. Then you don't need to add them to the html.
My contribution:
0x3333 . Thanks for your contribution. It is working fine for me. But the header and footer scolling slowly(not in sync with the tbody). It is taking time to sync for thead and footer with tbody while scrolling. Any solution for this
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's a fix in case your table is too wide for the containing
div: https://gist.github.com/3819758Makes the fixes header scroll horizontally with the table contents.