I'm struggling with a table design where I want part of it to be fixed and the rest to be scrollable.
My goal is to achieve something similar to this example, but within a single table structure.
If interested, you can view an example here.
I found a JSFiddle that enables scrolling, but I'm having trouble integrating the correct CSS classes to make some parts of the table fixed while others are scrollable.
You can find the JSFiddle here.
So far, here's the snippet of CSS code I've come up with:
#big_table {
width:200px;
overflow-x: scroll;
}
.fixed_cols {
}
.scrollable_area {
Ideally, I would like the section containing the months and their corresponding totals to be scrollable, while the left-most three columns remain fixed.
Does anyone know how to properly implement the .fixed_cols and .scrollable_area classes?