How to freeze frame using css

Question

I would like to create a table with a scrollable body. I will have a title bar and then data that will scroll with a fixed header. It is like freezing glass in excel. I tried to create a table above the content that I want to scroll, but the width of the columns does not match. It seems to me that everything should be in the same table so that all columns match. What is the best way to do this?

I created a violin to show what I'm trying to do. I tried a whole bunch of things to make this work, but never got it right.

http://www.jsfiddle.net/polyhedron/pzbmS/2/

Answer 1

Everything seems to look good to me - assuming I understand you correctly.

Edit: Sorry - I'm sure you are looking for alternatives. They can help

Pure CSS Scrollable Tables

Another similar link ...

Here is the quick and dirty jsFiddle I made - it uses only 1 line, as you mentioned.

jsFiddle

Answer 2

I had a project in which I needed the same behavior. Here is what I came up with:

http://blog.bobcravens.com/2010/01/html-scrolling-table-with-fixed-headers-jquery-plugin/

Here is a demo page of the end result:

http://bobcravens.com/demos/FixedHeaderTable/index.html

Hope this helps you. Let me know if you have any questions.

Bean

Answer 3

Add text alignment: left to the trad element:

thead tr { text-align: left; }