Question

I would like to have a table with a scrollbar to the right.
I want to accomplish this without any plugins(jQuery) just with css.
The table header is supposed to stay fixed.

What do I need to do to get this working?

Answer 1

You have taken on a task that, if you succeed, will make you a hero. I tried this and the straightforward thing — to position:fixed; the <thead> — is impossible. I had to copy all of the <thead> into a new object. But when you do that, the horizontal spacing of the <th> elements all goes away so the headings don’t line up with the <td>s anymore. I ended up doing something like this:

First of all, abandon ie6 and ie7. There’s no hope for those guys.

1. Make two copies of the table, one where the body is invisible and the <thead> is visible, and the other where it’s vice-versa.

2. Give z-index:1; to the table with the visible <thead>.

3. Give z-index:0; to the table with the visible <tbody>.

4. Deal with horizontal scrolling, but not until after you find that onScroll isn’t an ie8 event (not to mention ie6), so that you have to take a setInterval break every tenth of a second or so just to handle scrolling the <thead> left and right in ie8.

This will give you a table body of infinite scroll in both axes, with a table head that scrolls in the x axis only. Pretty much works in FF, Chrome, and Safari. But is shaky in ie8. A real pita.

Good luck, and please write if you get this to work!