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 remove the build-in PHP5.5 with Mac OS10.10 (PHP CLI) and use XAMPP(PHP5.3)

macos xampp symfony1

I installed XAMPP with PHP5.3, but now on command line, php -v always uses the Mac OS10.10 build-in PHP5.5! But I need to use PHP5.3 instead. How to config so that I can use XAMPP PHP 5.3?

Hbase read optimization

hbase hdfs hbasestorage

I am using 5 regionserves in my hbase cluseter. I am just storing md5 hash of the url as the rowkey and only one column family containing data field which contains data corresponding to the key(eac...