[jQuery] Re: keeping table header fix
On Sep 16, 2:16 am, macsig sigbac...@gmail.com wrote: Hello guys, I'd like to know if there is a way to keep a table header fixed on top of a div while I scroll the table rows. I have a div high 200px and the table itself is around 300px so when I scroll down I'd like to always see the header on top. I already use for the table tablesorter so the solution must be compatible with that plug-in. Thanks and have a nice day! Sig I think I finally found a way to keep column heads fixed or lined up with the data columns they go with. Have a look: http://sellmycalls.com/fixed-table-header.html The table id=main is the body of the table and scrolls vertically and horizontally. The div id=header is fixed vertically but scrolls horizontally. The only real insight I had was to make the header div be position:fixed; and to scroll that thing left/right, at intervals of around 1/10 second, based on the scrollLeft of the window. That keeps the header line from jumping up and down when scrolling the table vertically; it jumps left and right when scrolling horizontally, but that jiggle is less distracting than the old up-and-down motion, imho. If you use this solution, let us know how you make out. HTH -- ben
[jQuery] Re: keeping table header fix
On Sep 16, 2:16 am, macsig sigbac...@gmail.com wrote: Hello guys, I'd like to know if there is a way to keep a table header fixed on top of a div while I scroll the table rows. I have a div high 200px and the table itself is around 300px so when I scroll down I'd like to always see the header on top. I already use for the table tablesorter so the solution must be compatible with that plug-in. Thanks and have a nice day! Sig Hey folks -- I think I might finally have found a way to keep column heads fixed or lined up with the data columns they go with. Have a look: http://sellmycalls.com/fixed-table-header.html The table id=main is the body of the table and scrolls vertically and horizontally. The div id=header is fixed vertically but scrolls horizontally. The only real insight I had was to make the header div be position:fixed; and to scroll that thing left/right, at intervals of around 1/10 second, based on the scrollLeft of the window. That keeps the header line from jumping up and down when scrolling the table vertically; it jumps left and right when scrolling horizontally, but that jiggle is less distracting than the old up-and-down motion, imho. You see the headers /don't/ line up with the data columns in this table. That's because of the way the browser lays out tables, I think. The whole table, including the header, is layed out with a monospace font, and I layed out the header spacing by hand, based on the max width of each column. However, the browser seems not to care about monospace fonts when it's figuring out the space between header columns. Instead, it uses pixel positioning to place the header columns. Obviously, I can't take account of that in the CGI that constructs the table. Instead, my next CGI experiment will try this: as the table body is being output, remember the widths of the widest columns and use those widths in the (display:none;) body of the header table, outputting that after the table id=main is sent. I'm pretty sure this will work, but what a pita! Good luck to both of us. If you use this possible solution, let us know how you make out. HTH -- ben
[jQuery] Re: keeping table header fix
I create a lot of web-application list-screens with fixed-headers. I prefer to *not* work with a THEAD for this purpose because it is too limiting for complex page layouts. Instead, I create TWO tables - one for the headers and one for the content. This works well as long as you use table-layout:fixed and set specific column widths - I use a combo of fixed and percentage widths so that the tables will always auto-size to fill the page-width. Here is a simple example... div style=overflow-y: scroll; table style=table-layout: fixed col style=width: 10ex; col style=width: 20ex; col width=30% col width=70% col style=width: 24px; tr tdColumn 1/td tdColumn 2/td tdColumn 3/td tdColumn 4/td tdColumn 5/td /tr /table /div div style=overflow-y: scroll; height: 300px; table style=table-layout: fixed col style=width: 10ex; col style=width: 20ex; col width=30% col width=70% col style=width: 24px; tr tdData 1.1/td tdData 1.2/td tdData 1.3/td tdData 1.4/td tdData 1.5/td /tr tr tdData 2.1/td tdData 2.2/td tdData 2.3/td tdData 2.4/td tdData 2.5/td /tr tr tdData 3.1/td tdData 3.2/td tdData 3.3/td tdData 3.4/td tdData 3.5/td /tr /table /div Note that you need to set BOTH the header and content tables to overflow-y:scroll so that both containers have a scrollbar - even though the headers will not actually scroll. Without matching scrollbar, percentage column-widths would not line-up correctly. For IE, you can color the header-scrollbar with CSS so it is essentially 'invisible'. You can use any page-structure you want to control the height of the scrolling list. Separating the header markup from the list-markup provides a lot more options. This is compatible with a table-sorter because the 'list' is in a table by itself, so it is *impossible* for sorting or striping to affect your headers. It is also useful for Ajax - you can replace the entire data-table for maximum rendering speed. FYI, using table-layout:fixed also makes pages with large tables load MUCH FASTER because the browser does not have to wait for all the content to load before starting to render the table. The bigger the table, the more noticeable this improvement is. Hope that helps. /Kevin On Oct 2, 5:03 pm, lcplben b...@sellmycalls.com wrote: On Sep 16, 2:16 am, macsig sigbac...@gmail.com wrote: Hello guys, I'd like to know if there is a way to keep a table header fixed on top of a div while I scroll the table rows. I have a div high 200px and the table itself is around 300px so when I scroll down I'd like to always see the header on top. I already use for the table tablesorter so the solution must be compatible with that plug-in.
[jQuery] Re: keeping table header fix
On Sep 16, 2:16 am, macsig sigbac...@gmail.com wrote: Hello guys, I'd like to know if there is a way to keep a table header fixed on top of a div while I scroll the table rows. I am trying to do the same thing, but I'm debugging something else and I haven't succeeded yet. My approach has been that of the C coder that I am: -- give the header an id; make it display:none (works for me) -- at onload time, copy that header into another object that is displayable (the content shows up for me but I'm not so sure that the horizontal spacing -- between th/tds -- works right). Some things I found out: -- I cannot make /only/ the header tr behave the way I (and you) want -- and I cannot make thead work the way it's advertised: it wants to stay fixed vertically, but does not in FF3.5.3, IE7, or Safari. -- I do not make the displayable header position:fixed because the displayable header stays fixed /horizontally/ too: can't scroll the table left and right and expect that header to follow the body.. -- because no position:fixed, I have to handle vertical scrolling in JS code, which is what I'm working on right now. If I were a respectable JS coder, I believe I'd have these issues fixe^h^h^h^h corrected by now. But I'm just a JS beginner so taking baby steps. I would very much like to know how you approaching this problem. To see my developing solution: http://sellmycalls.com/cgi-bin/chain I hope this helps us both! -- Ben
[jQuery] Re: keeping table header fix
On Thu, 2009-10-01 at 22:25 -0400, Karl Swedberg wrote:
have you tried overflow-y: auto; ?
This works... (to some degree)
table tbody {
height: 799px;
overflow-y: auto;
overflow-x: hidden;
}
Cheers,
--
Matt Zagrabelny - mzagr...@d.umn.edu - (218) 726 8844
University of Minnesota Duluth
Information Technology Systems Services
PGP key 1024D/84E22DA2 2005-11-07
Fingerprint: 78F9 18B3 EF58 56F5 FC85 C5CA 53E7 887F 84E2 2DA2
He is not a fool who gives up what he cannot keep to gain what he cannot
lose.
-Jim Elliot
[jQuery] Re: keeping table header fix
Hmm, I gave this a try. Setting height stretches the table rows out
vertically if there are less records than the height. I tried putting a
fixed height div around the table and not setting a height on the tbody,
but then the tbody overflow-y never kicks in. Hmm.
Also, if I set the height of the tbody and the overflow-y does kick in,
then the scrollbar eats horizontal space in the rightmost col, which
means that I need to style that col to allow for it. Either way: if the
scrollbar were to show outside the table I'd need to allow room for it,
but just bringing it up as a caveat.
I know this issue has been tackled various ways in table plugins, but I
don't think I've seen a plugin made specifically just for show/hiding a
scrollbar and working around some of these issues. Anyone?
Thanks,
Jack
Matt Zagrabelny wrote:
On Thu, 2009-10-01 at 22:25 -0400, Karl Swedberg wrote:
have you tried overflow-y: auto; ?
This works... (to some degree)
table tbody {
height: 799px;
overflow-y: auto;
overflow-x: hidden;
}
Cheers,
[jQuery] Re: keeping table header fix
On Oct 2, 2009, at 12:11 PM, Jack Killpatrick wrote: Hmm, I gave this a try. Setting height stretches the table rows out vertically if there are less records than the height. I tried putting a fixed height div around the table and not setting a height on the tbody, but then the tbody overflow-y never kicks in. Hmm. you could use max-height: 799px; instead of height: 799px; Also, if I set the height of the tbody and the overflow-y does kick in, then the scrollbar eats horizontal space in the rightmost col, which means that I need to style that col to allow for it. Either way: if the scrollbar were to show outside the table I'd need to allow room for it, but just bringing it up as a caveat. try overflow-y: scroll; rather than overflow-y: auto; you'll get the scrollbar area whether it's needed or not, but at least it will be consistent. --Karl
[jQuery] Re: keeping table header fix
On Sep 16, 2:16 am, macsig sigbac...@gmail.com wrote: Hello guys, I'd like to know if there is a way to keep a table header fixed on top of a div while I scroll the table rows. I have a div high 200px and the table itself is around 300px so when I scroll down I'd like to always see the header on top. I already use for the table tablesorter so the solution must be compatible with that plug-in. There is a very discouraging discussion on this topic going on at comp.lang.javascript: http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/61f3829aaec3bb0a?hl=en# In the most recent post, the guy is telling me (imperiously) to use position:fixed. Now I'm going to tell him why I can't. It'll be interesting to see what happens next. I'm positive there are folks who have faced this problem. Will they appear? We shall see. -- ben -- ben
[jQuery] Re: keeping table header fix
bump... anyone know? If there's no nice css way, maybe a jquery way?
Would be nice if overflow:auto had an overflow:horizontal/vertical
option, I think.
Thx,
Jack
Jack Killpatrick wrote:
That's a neat trick I haven't tried before. Is there an easy way to
deal with (as in hide/remove) the horizontal scrollbar that also appears?
Does that work across browser? I've just tried FF so far.
Thx,
Jack
Matt wrote:
On Sep 16, 7:55 pm, Macsig sigbac...@gmail.com wrote:
Yes, I do but I don't see how that can help me out.
Thanks
On Sep 16, 4:01 am, Liam Byrne l...@onsight.ie wrote:
do you actually have the headers in a thead, with the content in tbody ?
Most people forget about those.
L
macsig wrote:
Hello guys,
I'd like to know if there is a way to keep a table header fixed on top
of a div while I scroll the table rows.
I have a div high 200px and the table itself is around 300px so when I
scroll down I'd like to always see the header on top.
I already use for the tabletablesorterso the solution must be
compatible with that plug-in.
Thanks and have a nice day!
Sig
No virus found in this incoming message.
Checked by AVG -www.avg.com
Version: 8.5.409 / Virus Database: 270.13.100/2375 - Release Date: 09/16/09
05:51:00
Because then you can add this to your CSS:
table.tablesorter tbody {
height: 250px;
overflow: auto;
}
[jQuery] Re: keeping table header fix
have you tried overflow-y: auto; ?
more information:
https://developer.mozilla.org/en/CSS/overflow-x
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 1, 2009, at 8:25 PM, Jack Killpatrick wrote:
bump... anyone know? If there's no nice css way, maybe a jquery way?
Would be nice if overflow:auto had an overflow:horizontal/vertical
option, I think.
Thx,
Jack
Jack Killpatrick wrote:
That's a neat trick I haven't tried before. Is there an easy way to
deal with (as in hide/remove) the horizontal scrollbar that also
appears?
Does that work across browser? I've just tried FF so far.
Thx,
Jack
Matt wrote:
On Sep 16, 7:55 pm, Macsig sigbac...@gmail.com wrote:
Yes, I do but I don't see how that can help me out.
Thanks
On Sep 16, 4:01 am, Liam Byrne l...@onsight.ie wrote:
do you actually have the headers in a thead, with the content
in tbody ?
Most people forget about those.
L
macsig wrote:
Hello guys,
I'd like to know if there is a way to keep a table header fixed
on top
of a div while I scroll the table rows.
I have a div high 200px and the table itself is around 300px so
when I
scroll down I'd like to always see the header on top.
I already use for the tabletablesorterso the solution must be
compatible with that plug-in.
Thanks and have a nice day!
Sig
No virus found in this incoming message.
Checked by AVG -www.avg.com
Version: 8.5.409 / Virus Database: 270.13.100/2375 - Release
Date: 09/16/09 05:51:00
Because then you can add this to your CSS:
table.tablesorter tbody {
height: 250px;
overflow: auto;
}
[jQuery] Re: keeping table header fix
On Sep 16, 7:55 pm, Macsig sigbac...@gmail.com wrote:
Yes, I do but I don't see how that can help me out.
Thanks
On Sep 16, 4:01 am, Liam Byrne l...@onsight.ie wrote:
do you actually have the headers in a thead, with the content in tbody ?
Most people forget about those.
L
macsig wrote:
Hello guys,
I'd like to know if there is a way to keep a table header fixed on top
of a div while I scroll the table rows.
I have a div high 200px and the table itself is around 300px so when I
scroll down I'd like to always see the header on top.
I already use for the tabletablesorterso the solution must be
compatible with that plug-in.
Thanks and have a nice day!
Sig
No virus found in this incoming message.
Checked by AVG -www.avg.com
Version: 8.5.409 / Virus Database: 270.13.100/2375 - Release Date:
09/16/09 05:51:00
Because then you can add this to your CSS:
table.tablesorter tbody {
height: 250px;
overflow: auto;
}
[jQuery] Re: keeping table header fix
That's a neat trick I haven't tried before. Is there an easy way to deal
with (as in hide/remove) the horizontal scrollbar that also appears?
Does that work across browser? I've just tried FF so far.
Thx,
Jack
Matt wrote:
On Sep 16, 7:55 pm, Macsig sigbac...@gmail.com wrote:
Yes, I do but I don't see how that can help me out.
Thanks
On Sep 16, 4:01 am, Liam Byrne l...@onsight.ie wrote:
do you actually have the headers in a thead, with the content in tbody ?
Most people forget about those.
L
macsig wrote:
Hello guys,
I'd like to know if there is a way to keep a table header fixed on top
of a div while I scroll the table rows.
I have a div high 200px and the table itself is around 300px so when I
scroll down I'd like to always see the header on top.
I already use for the tabletablesorterso the solution must be
compatible with that plug-in.
Thanks and have a nice day!
Sig
No virus found in this incoming message.
Checked by AVG -www.avg.com
Version: 8.5.409 / Virus Database: 270.13.100/2375 - Release Date: 09/16/09
05:51:00
Because then you can add this to your CSS:
table.tablesorter tbody {
height: 250px;
overflow: auto;
}
[jQuery] Re: keeping table header fix
do you actually have the headers in a thead, with the content in tbody ? Most people forget about those. L macsig wrote: Hello guys, I'd like to know if there is a way to keep a table header fixed on top of a div while I scroll the table rows. I have a div high 200px and the table itself is around 300px so when I scroll down I'd like to always see the header on top. I already use for the table tablesorter so the solution must be compatible with that plug-in. Thanks and have a nice day! Sig No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.5.409 / Virus Database: 270.13.100/2375 - Release Date: 09/16/09 05:51:00
[jQuery] Re: keeping table header fix
Yes, I do but I don't see how that can help me out. Thanks On Sep 16, 4:01 am, Liam Byrne l...@onsight.ie wrote: do you actually have the headers in a thead, with the content in tbody ? Most people forget about those. L macsig wrote: Hello guys, I'd like to know if there is a way to keep a table header fixed on top of a div while I scroll the table rows. I have a div high 200px and the table itself is around 300px so when I scroll down I'd like to always see the header on top. I already use for the table tablesorter so the solution must be compatible with that plug-in. Thanks and have a nice day! Sig No virus found in this incoming message. Checked by AVG -www.avg.com Version: 8.5.409 / Virus Database: 270.13.100/2375 - Release Date: 09/16/09 05:51:00
