0

I would like my table header to be fixed when I scroll vertically.

Also, how do I make my table stay inside the tab contents of jQuery UI Tabs? I want it to be aligned against the bottom of it; it's not supposed to be 100% of the tab content height because there is other content above the table, but I want it to fill out all the available space (the tabs are of certain height to not go below screen, so the body is not supposed to have a scroll bar, nor the tabs). As you can see today, I have a fixed table height of 450px, and on some screens that's perfect but on some it goes outside (see picture).

enter image description here

I want the scrollbar to be on the very right hand side (the yellow line), not next to where the table ends, if possible. Similar to Facebook I think.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
silkfire
  • 24,585
  • 15
  • 82
  • 105
  • Would be better if you can provide the code sample that you have. **[jsfiddle.net](http://jsfiddle.net/)** or **[jsbin.com](http://jsbin.com/)** – jherax Jun 26 '13 at 13:16
  • A very tedious way of doing that: http://jsfiddle.net/PfGQA/ – xjedam Jun 26 '13 at 13:32
  • take a look at this [post](http://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on) – avrahamcool Sep 24 '13 at 06:17

1 Answers1

1

None of the other solutions I've found met all my requirements, so I created a very lightweight jQuery plugin to do this. It supports fixed header, footer, column spanning (colspan), resizing, and an optional number of rows to display before scrolling starts.

jQuery.scrollTableBody (GitHub)

As long as you have a table with proper <thead>, <tbody>, and (optional) <tfoot>, all you need to do is this:

$('table').scrollTableBody();

UPDATE: Added support for horizontal scrolling as well

Noah Heldman
  • 6,724
  • 3
  • 40
  • 40