What are the minimum requirements to make a table have a fixed header for vertical scrolling and a scrolling header for horizontal scrolling?

Question

What are the minimum requirements to make a table have a fixed header for vertical scrolling and a scrolling header for horizontal scrolling?

I am trying to accomplish the following with a basic HTML/CSS table:

• The table that contains dynamically generated content so the cells should be the size they need to be to fit the content (not fixed width cells).

• The table, should be whatever size it needs to be to accommodate the cells. The table will be wider than its container, and most likely, the screen. It should not overflow its container, but be scrollable horizontally.

• The table will be inside a container that has absolute position, 0,0,0,0, to make it the size of it's parent container (which is position:relative).

• When there is too much content to fit horizontally, a horizontal scroll-bar should appear that scrolls the table left-right with it's header.

• When there are too many rows, a scroll bar should appear vertically, but when scrolling, the header row should not scroll vertically, it should stay visible.

There are a few Jquery plugins that add a huge feature set to tables, including this type of scrolling. Unfortunately, I don't want/need a complete table-to-grid plugin, I just need to understand the essential css rules that are required to achieve a fixed header for vertical scrolling and a scrolling header for horizontal scrolling.

Here's an example from a plugin demo page: http://www.tablefixedheader.com/fullpagedemo/. The scrolling here works the way I want, but it seems to use fixed widths and I don't know if that's required, or if javascript is calculating those widths, etc.

Specifically, what I'm looking for is someone that can explain the necessary (and only the necessary) markup and css rules that are needed to make a plain old table scroll in the way described above. I want to understand how and why the rules work.

An ideal answer would be a few lines of HTML showing which things have to be wrapped in divs, etc and a few lines of CSS showing only the critical rules that make it work, followed by an explanation of what those critical rules are doing to make it possible.

I have been trying to get the functionality working for 3 days now, and can Only get certain parts working, but not all at the same time.

Answer 1

In all essence, it is not the table that will be doing the scrolling, it will be the div that is holding the table that will be doing the scrolling. Let's take a look at some example code:

<div style="height:200px; overflow-y: scroll;">
  <table>
   ....
  </table>
</div>

Once the table reaches a limit where there is too much data to be held in a 200px range div, it will automatically start the scroll bar with the element overflow-y. Now, to obtain a scroll bar that will be used for horizontal and vertical scrolling, you switch from overflow-y: scroll to overflow: scroll;. I have referenced this from the following stack question.

For the last part, creating a fixed header, we can reference the following JsFiddle:

DEMO

This is again, referenced from a different stack question. The key part to this is using two tables to represent one big table. This is placing the first table on top of the second table and then enabling table-layout: fixed to keep everything together.

The real problem arises when you try to get your table to horizontally scroll, that may need JQuery or some JS derivative, so here is a good stack question to point you in the right direction.

The last thing I want to cover is the optimizing differences between tables and divs/uls/lis (we can call it a DUL to keep it short). To get a better idea of what exactly I mean, take a look at this final stack question. This may or may not pertain to you, it's honestly dependent upon how comfortable you are with changing your layout and then also whether or not you feel the need to try and optimize results. You may not need it at all, but again, something to consider.