Table with fixed and scrolling columns

I've got a table and I'd like to make a portion of it fixed and a portion of it scrollable.

I'm looking to end up with something like this, except in a single table.

http://jsbin.com/owuva4

Here's a JSFiddle that does the scrolling, but I can't figure out how to wedge in the correct css classes to make part of the table fixed and part scrollable.

http://jsfiddle.net/bnd5k/J9QV7/6/

Here's the css so far:

#big_table {
  width:200px;
  overflow-x: scroll;
}

.fixed_cols {

}

.scrollable_area {

Ideally, the area that contains the months and the totals associaed with them would be scrollable while the other, left-most three columns would be fixed.

What do I need to do get the .fixed_cols and .scrollable_area classes working correctly?

Answers


How about nested tables? You can only use a <div> inside a <td>, so nesting seems to be the only option here.

http://jsbin.com/OxAJoFaL/1/edit

EDIT: That doesn't work, titles weren't lining up with columns and it doesn't solve the last part of your question - horizontally scrolling the months.

Anyway, I got intrigued by this so continued digging. If you don't mind nesting tables, and doing so in a questionably semantic way, then...

http://jsbin.com/OxAJoFaL/3/edit


Need Your Help

How to use Toast notification as reminder in WP7 using C#?

c# windows-phone-7

I have a reminder control in my code which i want to convert in a toast notification. Can somebody tell me how to get it?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.