Question

I have a frustrating problem with the following scenario:

• Right col, with table. Always 100% of available browser width.

• Smaller Left col (sidebar) with width set to just 140px. Left col has slide-in / slide-out animation, i.e. it can be minimised if not required to maximise available horizontal space for the table in the right col. Right col alters its width correspondingly to use all the space.

• The page header and the table heading row are fixed at the top of the page using a jquery plugin. I could have used position:fixed but then when the table forces the page to scroll horizontally it all breaks as you cant scroll horizontally with position:fixed. Hence the jquery plugin.

The problem is, the jQuery plugin remembers the original widths on the elements, so when the sidebar is shrunk and the page is scrolled, the fixed elements (header rows and sidebar) return to their original size rather than staying shrunk.

I made a basic example of the problem, with all the elements explained above, on jfiddle.
http://jsfiddle.net/cr0wn3r/ktbdx/18/

Answer 1

Instead of using jquery plugin which doesn’t include refreshing option you can do the trick by yourself.

HERE there is short and great tutorial how to obtain the position effect you want to have.