Get TBODY of table to scroll

Originally, I made a seperate line of headers, then below that made a table within <DIV>'s, and had that scroll. My issue now is make the headers sort column onClick. To do this, I can't have them 2 seperate items. Sorting works fine, but the TBODY portion I wish to only be like 500px tall, and not the whole page. How would I do this?

Kinda an idea of my goal:



As far as my sorting, it is in place and successful, but not designed for a scrolling area.

http://www.kryogenix.org/code/browser/sorttable/

EDIT: I did try placing the TBODY in its own DIV and get that to display as desired, but no luck. I currently have the whole table within my DIV which does stand the 500px tall and is scrollable. Just gotta get the HEADERS somehow locked.

I've found an implementation of what you're looking for at: http://www.cssplay.co.uk/menu/tablescroll.html

The author has graciously allowed the reuse of his code, with attribution, and you can learn more about it from his website ... but I'll delve into the reasons why his solution works here.

The table is wrapped in two divs, .outer and .innera. Those divs have the following properties:

.outer:


.innera:


Now this is the important bit which enables his solution; each TR within a THEAD has the following styles applied to it:



What this is doing is the following: specify a height for the div containing the table via the .inner class (height:9.6em;), and force the contents of that div to be scrollable (overflow: auto;).

Now, were you to just implement the overflow: auto; on a div with a specified height wrapped around your table, the entire table - headers and all - would scroll. This is where relative/absolute positioning come into play...

Since the .outer class uses relative positioning (position: relative;), any element within it can be absolutely positioned (position: absolute;). An absolutely positioned element stays put. It does not scroll: it sticks to whatever geometry you assign it.

So, when the author specifies (top:1.5em; left:0;) it means this: "Force all of the TR's within THEAD tags under the .outer class to absolutely position themselves 0px from the left edge of the containing div, and 1.5em from the top."

Ergo the entire table still scrolls as discussed before, the only difference now is that you've told the THEAD's to stay put at a certain location regardless of scrolling, thereby achieving the result you're aiming for.

- Null

Excellent! After minimal tampering with, all works excellent EXCEPT.....

The first row now seems to be rather independant, and so does its sizing in column width. Will I need to manually define widths for each column, or is there a way for it to hold matching widths as the rest?


EDIT: Actually, first row is fine now. After the defining the THEAD and TBODY, I forgot to add in the class attribute. Now the cells in THEAD hold correct widths, but not the rest. My table-layout is 'fixed', so the rest of the columns are equally spaced. Anyone know how to adjust columns as desired?

I'm not sure what your code looks like since you've implemented the changes, but to steal from the linked example's source once again:



Note that the author is using <TH> tags with scope="col" specified instead of <TD> tags.

You can read more about TH tags and the scope attribute here: https://developer.mozilla.org/en-US...TML_Elements/th

- Null

I've tried many things. It seems the thing getting me stuck is the table-layout: fixed;

If I remove it, table expands as wide as needed to fit all content in its cell, which is not desired. If I replace it, and don't detatch the header as we've done, every column has the desired width. Once we pull the THEAD and TBODY apart, the THEAD has desired widths, but the TBODY has even widths. i.e. Table width is 1000px w/ 5 columns, so every col is 200px.

I removed class/id atts from the td/th tags to define widths, and inserted <colgroup><col> items to define width. They were placed after the TABLE tag, and adjust width desireably on TBODY columns, but not THEAD. :-/ Any ideas with this one?