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
