Fixed Header/Scrollable Table with Variable Width

I realize this question has been asked quite a bit on Stack Overflow; however, after looking through a number of them, I believe my question has one more开发者_如何学Go requirement. I want to transform a regular html table, into a table that can be scrolled both vertically and horizontally, while the the header remains at the top. The width of this table exceeds the width of the page, so I need the headers to move horizontally as the table is scrolled. I would prefer to use a pure CSS method; however, I will use Javascript if necessary. Have yet to find a solution that does all of this.

This solution might work for you depending on the style of your headers. It's pure CSS. http://salzerdesign.com/blog/?p=191

Why would you not just use a and set a height and width for it allowing overflow. Then just simply place your table in there and you are good to go.

To me that just seems like the most logic and easiest way to go about it...

well you can use JQuery to do this in few lines of code, you can see my other post to create a table with fix header and scrollable body

Create Table with scrollable body

after that lets imagine you have one div for the headers with class name = "Top1" and one div for the body with class name = "Top2", you can bind the scroll of one to the other

$('.Top2').bind('scroll', function(){
  $(".Top1").scrollLeft($(this).scrollLeft());
});

$('.Top1').bind('scroll', function(){
  $(".Top2").scrollLeft($(this).scrollLeft());
});

jsFliddle demo

Here is a good jQuery plugin, working in all browsers! (check out the demo)

The result is a table with a fixed header, scrolling (for the moment..) only vertically, but with a variable width.

I develop this plugin to meet the problem of fixed header + flexible width.

Check it: https://github.com/benjaminleouzon/tablefixedheader