Freezing Table Header

[kss444]

Hello all,
I have inhereted a web app that uses a web control that someone built it is kind of like a drop down but the result are actual in a table. And now I am wanting to maintain the header titles when the user scrolls down the fields.

I found the class the page is calling and it is:
table.dropDownSearch tr.Header
{
background-color: #BDB76B;

}
If is set position: fixed; in this class then the titles are fixed but it show up over the first record.

any help or suggestions would be great,
Thanks,

Ordinary Programmer

 

[feherke]

Hi

Better try the other way : scrolling the content, instead of fixating the header. Basically is fairly simple, but making it to work cross-browser may is abit tricky. So better google for "scrollable table" and pick an existing solution.

Feherke.

http://rootshell.be/~feherke/

 

[tlhawkins]

yeah, there are some "ok" solutions to this out there. They basically all are trying to do the same thing.

because there is no built in way to freeze the <TH></TH> row they are creating a table above the content table that has the same width columns and then scroll the content within the data table while the header table stays fixed.

The main issue, of course, is keeping the column width the same between the 2 tables.

Travis Hawkins
jobs.bestcodingpractices.com

 

[feherke]

Hi

Correct. That is why the "ok" solutions are using a single [tt]table[/tt] and let just the [tt]tbody[/tt] to scroll.


Feherke.

http://rootshell.be/~feherke/