1

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ben Downey
  • 2,575
  • 4
  • 37
  • 57
  • 2
    http://stackoverflow.com/a/1312678/2388219 should help you, though in my own experience it wasn't enough to make a working model fit for production. I ended up using http://www.datatables.net/ which is large, clunky, buggy in different ways, but cuts one table into a fixed-column + scrollable table. – Ming Nov 20 '13 at 03:15
  • I've seen that post and I had trouble with the `position:absolute` line in .headcol. It didn't play well with the other elements on the page. – Ben Downey Nov 20 '13 at 03:18

1 Answers1

1

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

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • Yeah, I'm ok with this approach. However, I'm a little surprised that there is isn't already and established "correct" way to do this. – Ben Downey Nov 20 '13 at 12:31