CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Ioan Alexandru Cucu
Ioan Alexandru Cucu

Reputation: 12269

Horizontally scrollable table column

I would need to build a html table that has a horizontally scrollable column. The scroll should be placed in the column's header.

My first question is: do you know any jQuery plug-in that is able to do this? My second question: is this possible using a single table? I've heard that in order to do this you need to use multiple synchronized tables that look like a single one from the user's perspective.

Any idea/advice would be welcomed.

Upvotes: 2

Views: 592

Answers (2)

user299312
user299312

Reputation: 23

I would do as you suggested and use 2 containers. They'd both be set to overflow:scroll and have a set width, but the top one would simply contain a div that you can set to be the same width as your table. You can then bind to the "scroll" event in jquery, and set the scroll position of the divs to match each other in that event. Honestly I haven't tried this so I don't know how reliably that event fires, but in theory it should work.

Alternatively, you could do without the standard browser scrollbar and write your own scrollbar that uses javascript to set the position of your table in the overflow:scroll div. If you want draggable behavior (not just left/right arrows), it could be somewhat difficult, but wouldn't be impossible.

Upvotes: 1

odavy
odavy

Reputation: 485

I've only seen something like this using jqGrid, but that was two tables (the master table has a second scrollable table within it). I'd like to know a plugin for this as well...

Upvotes: 1

Related Questions