I have a table rendered from custom control over which I have no control yet I need to make this table scrollable so that the header, or actually the first row is fixed. Is there a jQuery plugin that would allow me to do this?
views:
16315answers:
8
A:
Don't need a jQuery plugin, what you can do is separate the headers from the other rows (create two tables), and then use a overflow:scroll for the css of the regular rows.
Update (in response to note being able to control content):
Use Flexigrid:
$('#flexme').flexigrid();
altCognito
2009-06-11 19:13:20
Cannot do this, I have no control how it renders the output (asp.net control). Just have bunch of rows, where the first one acts as header.
epitka
2009-06-11 19:17:08
Separating them was my first approach, but this only works if you give the columns a fixed width. Otherwise the header and the body will stretch the column widths independantly as they see fit and will verry likely not match.
borisCallens
2009-06-23 10:35:14
+8
A:
Consider using CSS:
table th
{
position: fixed;
}
But it might not be what you're looking for. Also consider using overflow:
table tbody
{
overflow: scroll;
}
and just wrap your table body in the <tbody /> container.
On the topic of cool JavaScript table programs - check out a frequency decoder article on sorting tables on the fly - I've worked with this script before and it's fantastic.
Andrew Dunkman
2009-06-11 19:18:04
Scratch that, it works fine so long as you specify a fixed height and include the tbody tag: http://jsbin.com/olibo
altCognito
2009-06-11 20:34:11
while i try this ....header fields crashed (I can see blacks in header), why it is so.
Ramakrishnan
2010-09-13 09:44:58
+1
A:
I just wrote a jQuery plugin that does exactly what you need. You just build 1 table with a thead and tbody and it does the rest for you. Very simple to use...i posted the solution under another question linked below.
http://stackoverflow.com/questions/486576/frozen-table-header-inside-scrollable-div/1533619#1533619
or a link straight to my plugin site:
Mark
2009-10-07 21:18:52
A:
Another solution is discussed here without using jQuery or any other libraries
Jaimon Mathew
2010-03-02 17:03:42
A:
Hey,
I have a really simply solution that I created to this using basic CSS and a little bit of jQuery script. I even have it set so that the user can turn the locking headers on and off at will.
Check it out: http://www.bobthegeek.com/?p=12
Let me know if you have any questions.
Thanks.
Bob
Bob Gibilaro
2010-03-17 17:53:50
+1
A:
Would love to see a no-frills jquery plugin that allows sortable header and scrolling rows. Of the options above, Flexigrid comes closest, but it's overkill.
Matt
2010-06-16 19:37:06
And worst, I have a lot of trouble for doing a true cross-browser table with fix header (IE 6-8 and FireFox required). After 3 test days, I revert to a PDF-view with iText
daitangio
2010-06-17 15:55:28
A:
Here is a good jquery plugin, working in all browsers !
You have a fixed header table without fixing his width...
Check it : http://www.tablefixedheader.com/
bln
2010-08-23 07:38:52