Skip to content

Instantly share code, notes, and snippets.

@BaylorRae
Created August 15, 2012 00:53
Show Gist options
  • Save BaylorRae/3354349 to your computer and use it in GitHub Desktop.
Save BaylorRae/3354349 to your computer and use it in GitHub Desktop.
Create fixed table headers with jQuery
// http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
var Browser = {
version: function() {
var version = 999; // we assume a sane browser
if (navigator.appVersion.indexOf("MSIE") != -1) {
// bah, IE again, lets downgrade version number
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return version;
}
};
var table = $('table'),
thead = table.find('thead'),
fixed_thead,
the_window = $(window),
tr_1, tr_2, did_scroll = false;
thead.find('td').each(function() {
$(this).css('width', $(this).width());
});
fixed_thead = thead.clone();
thead.after(fixed_thead);
if( Browser.version() < 8 ) {
fixed_thead.find('tr').css({
'position': 'absolute',
'top': 0
});
tr_1 = fixed_thead.find('tr:first');
tr_2 = fixed_thead.find('tr:last').css('margin-top', tr_1.height());
}else {
fixed_thead.css({
'position': 'fixed',
'top': 0,
'width': table.width()
});
}
fixed_thead.hide();
the_window.scroll(function() {
if( the_window.scrollTop() >= table.offset().top ) {
fixed_thead.show();
if( Browser.version() < 8 ) {
did_scroll = true;
}
}else {
fixed_thead.hide();
}
if( the_window.scrollTop() > (table.offset().top + table.height()) - fixed_thead.height() ) {
fixed_thead.hide();
}
});
setInterval(function() {
if( did_scroll ) {
did_scroll = false;
tr_1.css('top', the_window.scrollTop());
tr_2.css('top', the_window.scrollTop());
}
}, 250);
var table = $('table'),
thead = table.find('thead'),
fixed_thead,
fixed_table = $('<table />', {
'cellpadding': 5,
'cellspacing': 0,
'border': 1,
'id': 'fixed_table_header'
}),
fixed_table_wrapper = $('<div />', {
'height': 400,
'css': {
'overflow': 'auto'
}
});
table.before(fixed_table);
thead.find('td').each(function() {
$(this).css('width', $(this).width());
});
fixed_thead = thead.clone();
fixed_table.append(fixed_thead);
thead.hide();
table.wrap(fixed_table_wrapper);
// align the new table header with the original table
fixed_table.css('left', (fixed_table.offset().left - table.offset().left) * -1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment