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?

回答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

来源：https://stackoverflow.com/questions/20086473/table-with-fixed-and-scrolling-columns