Skip to content

Instantly share code, notes, and snippets.

@i-scorpion

i-scorpion/README.txt

Created June 18, 2012 12:24
Show Gist options
  • Star 78 You must be signed in to star a gist
  • Fork 34 You must be signed in to fork a gist
  • Save i-scorpion/2948136 to your computer and use it in GitHub Desktop.
Save i-scorpion/2948136 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter bootstrap fixed table header using jQuery
Raw
README.txt
Here is a simple jQuery plugin to make a table header fixed on top when window is scrolled.
Using the code from twitter bootstrap documentation page, this code is customized for table header.
Create the table with following layout -
<table class="table-fixed-header">
<thead class="header">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Column 1</td>
<td>Data Column 2</td>
<td>Data Column 3</td>
</tr>
...
</tbody>
</table>
Add the css from the file "table-fixed-header.css"
To apply it to above table, call -
$('.table-fixed-header').fixedHeader();
It can take two parameters -
bgColor - background color of the fixed header
topOffset - offset from top of windows where the fixed-header will be positioned (default is 40)
If you use any other value for topOffset, update the "top" parameter CSS as well accordingly.
For example, if there is no fixed navbar, you can set topOffset to 0 -
$('.table-fixed-header').fixedHeader({topOffset: 0});
Also update the CSS to - top: 0;
Raw
sample.html
<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>
<style type="text/css">
#mynav {
top: 0;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1030;
height:40px;
color:#fff;
background-color:#666;
text-align: center;
}
body { padding-top:60px; }
</style>
</head>
<body>
<div class="container">
<h2 id="mynav">| my navigation bar | my navigation bar | my navigation bar | my navigation bar |</h2>
<h1>Table Fixed Header</h1>
<table id="mytable" class="table table-bordered table-striped table-fixed-header">
<thead class="header">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Column 1</td>
<td>Data Column 2</td>
<td>Data Column 3</td>
</tr>
</tbody>
</table>
<h1>Another table</h1>
<table id="mytable2" class="table table-bordered table-striped table-fixed-header">
<thead class="header">
<tr style="color:#00f;">
<th>Column 11</th>
<th>Column 22</th>
<th>Column 33</th>
<th>Column 44</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Column 11</td>
<td>Data Column 22</td>
<td>Data Column 33</td>
<td>Data Column 44</td>
</tr>
</tbody>
</table>
</div>
<script language="javascript" type="text/javascript" >
$(document).ready(function(){
// add 30 more rows to the table
var row = $('table#mytable > tbody > tr:first');
var row2 = $('table#mytable2 > tbody > tr:first');
for (i=0; i<30; i++) {
$('table#mytable > tbody').append(row.clone());
$('table#mytable2 > tbody').append(row2.clone());
}
// make the header fixed on scroll
$('.table-fixed-header').fixedHeader();
});
</script>
</body>
</html>
Raw
table-fixed-header.css
table .header-fixed {
position: fixed;
top: 40px;
z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
border-bottom: 1px solid #d5d5d5;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}
Raw
table-fixed-header.js
(function($) {
$.fn.fixedHeader = function (options) {
var config = {
topOffset: 40,
bgColor: '#EEEEEE'
};
if (options){ $.extend(config, options); }
return this.each( function() {
var o = $(this);
var $win = $(window)
, $head = $('thead.header', o)
, isFixed = 0;
var headTop = $head.length && $head.offset().top - config.topOffset;
function processScroll() {
if (!o.is(':visible')) return;
var i, scrollTop = $win.scrollTop();
var t = $head.length && $head.offset().top - config.topOffset;
if (!isFixed && headTop != t) { headTop = t; }
if (scrollTop >= headTop && !isFixed) { isFixed = 1; }
else if (scrollTop <= headTop && isFixed) { isFixed = 0; }
isFixed ? $('thead.header-copy', o).removeClass('hide')
: $('thead.header-copy', o).addClass('hide');
}
$win.on('scroll', processScroll);
// hack sad times - holdover until rewrite for 2.1
$head.on('click', function () {
if (!isFixed) setTimeout(function () { $win.scrollTop($win.scrollTop() - 47) }, 10);
})
$head.clone().removeClass('header').addClass('header-copy header-fixed').appendTo(o);
var ww = [];
o.find('thead.header > tr:first > th').each(function (i, h){
ww.push($(h).width());
});
$.each(ww, function (i, w){
o.find('thead.header > tr > th:eq('+i+'), thead.header-copy > tr > th:eq('+i+')').css({width: w});
});
o.find('thead.header-copy').css({ margin:'0 auto',
width: o.width(),
'background-color':config.bgColor });
processScroll();
});
};
})(jQuery);
@Magniveo
Copy link

Magniveo commented Apr 11, 2018 •
edited

Don't work for me.

@andrealuciani
Copy link

@yanickrochon

But when the window size is resized larger (after init), then the columns's width do not go beyound the table header width previously set. My last snippet fixes this.

Can you post a sample code please? (jquery newbie here)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment