Hi, I just try to develop a plugin based on jQuery to meet the problem of fixed header in HTML tables.
Browsing the web, I discovered many interesting plugins but many did not respond to certain issues (in particular, that a table could have a variable width) or, if they met, a lot of code was necessary to recalculate each time widths of cells, with observers, timeouts etc…
So I developed this plugin by focusing on resizing cells by the web browser engine.
This plugin is not very complicated, but I think it meets a certain way to the problem.
(take a look at the Documentation !)
Sorry for my english…
6 Comments
great dude u r god man……..
Wow this is very nice. Scrollable tables is a real problem with CSS and web browser idiosyncrasies. I’ve been using one for a while now and research them before. They all have their disadvantages such as not having headers lined up, having scrollbar issues, and when there’s only a few table rows that aren’t enough to fill the area – they stretch to fill it and look crazy. Your example looks very nice. I was hoping to do it without javascript but I just started using jQuery in my app so I may try it.
Hi and thanks for your comment..
You’re right, how comes a such usual and basic feature like fixing headers of HTML table is not natively implemented by the browsers.
We are forced to rely on javascript to do this kind of thing, and it is not necessarily a good thing.
However, I wanted to develop this plugin, trying to reproduce the native behavior of an HTML table, especially when resizing the browser or divs inside. We can have a table full page that resizes with the browser’s rendering engine and not through “events listenners”, which is why it is so fast!
Hi, Benjamin!
You plugin is nice, but it does not seem to deal with the situation when we have more than 1 row in THEAD.
I have a table with content-heavy headers + colspans.
I altered your code in this way to support it (I hope this is OK):
function buildHeaders(table) {
_headers = $(”);
_headerscontainer.append(_headers);
_headers.append(buildColgroup(nbcol));
var thead = $(”);
// NEW CODE
$(‘thead tr’, $(table)).each(function () {
var theadrow = $(”);
$(‘th’, $(this)).each(function () {
theadrow.append(this);
});
thead.append(theadrow);
});
// YOUR CODE
// var theadrow = $(”);
// $(‘thead th’, $(table)).each(function () {
// theadrow.append(this);
// });
// thead.append(theadrow);
_headers.append(thead);
return _headers;
}
It seems to help.
Strangely enough I could not find any actually working “fixed header” plug-ins lately: or the plug-in wasn’t working at all, or it wasn’t working with colspans in THEAD or some other problem. Yours is working!
Thank you!
Mickey
(sorry for my bad English)
Hi.. Great!
a heartfelt thanks!