Skip to content

Instantly share code, notes, and snippets.

@flaviaza

flaviaza/README.txt

Forked from i-scorpion/README.txt
Created September 21, 2012 18:08
Show Gist options
  • Save flaviaza/3763015 to your computer and use it in GitHub Desktop.
Save flaviaza/3763015 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>[email protected]</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>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</td>
<td>firstname</td>
<td>LastName</td>
<td>Data Column 4</td>
</tr>
<tr>
<td>[email protected]</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()});
});
};
})(jQuery);
@flaviaza
Copy link
Author

thanks!

@straydogstudio
Copy link

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.

@0x3333
Copy link

0x3333 commented Feb 20, 2015

My contribution:

https://gist.github.com/0x3333/c10035a9e6efdf54f464

@kittu421
Copy link

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