Skip to content

Instantly share code, notes, and snippets.

@crstn

crstn/README.txt

Forked from flaviaza/README.txt
Created October 2, 2012 14:51
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save crstn/3819758 to your computer and use it in GitHub Desktop.
Save crstn/3819758 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 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.
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>
</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>
Raw
table-fixed-header.css
.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;
}
Raw
table-fixed-header.js
(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()});
// makes the header scroll horziontally with the table if
// the table is too wide to fit into the surrounding div
o.closest('.table-content').scroll(function(){
var scroll = $(this).scrollLeft();
nhead.find('thead.header-copy').css('margin-left', -scroll);
});
});
};
})(jQuery);
Copy link

ghost commented Oct 17, 2012

Thank you for the scroll fix. But I have a small issue which I am unable to fix. When I have a table which is too wide, the header hides the vertical scrollbar : http://i.imgur.com/ob7Cz.png
Is there a way to resolve this? Thanks.

Copy link

ghost commented Oct 17, 2012

Thank you for the fix. I have a small problem which I am unable to fix. When the table is too wide, the header is hides the vertical scrollbar - http://i.imgur.com/ob7Cz.png . Is there a way to get around this? Thanks.

@avspeed
Copy link

avspeed commented Nov 30, 2012

does not appear to be working in ie 9

@josegonzalez
Copy link

IE sucks, use a real browser like Opera or Lynx.

@prasun-jha
Copy link

When data overflows in X and Y both direction, then Vertical Scrollbar's top part is hidden by fixed header . Finding it difficult to fix.

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