HTML Table with Fixed header, Resizable Columns and can size to less than the content width

Question

Hi.

I'd like to include a table in my web application thing that has a fixed, styled, header AND resizable columns AND to be able to resize the columns (both by when the browser is resized as the table is 100% and by the user resizing the columns) to less than the content and the content get truncated (hidden).

Also somehow I'd like the body of the table (not the header) to scroll if it can't all fit.

At the moment, I don't care if it doesn't work in every browser, I just need it to work in a webkit-based browser.

I've tried lots of different combinations, including tons of jQuery plugins, displaying the header bits as display:block and then using jQuery resize, and even the CSS3 resize value, all not providing all these features I need.

Does anyone know of something that supports this, or has code to make this happen? Thanks.

Answer 1

hi,

you can use this jquery plugin : http://www.tablefixedheader.com/

It's the only plugin of "fixed header table" without width fixing and without body resizing observers !

you can easy customize the table with theme files..

Answer 2

Hi,

I have implemented a scrollable table which dynamically changes its width depending on screen width and height.

It works fine in IE, FF and most importantly Chrome. I hope this will solve your issue. http://s7u.blogspot.com/2010/10/dynamic-height-fixed-header-table.html

Please let me know if you have any suggestions :-)

Regards, Shahib

Answer 3

Fixed few bugs in my code. Now things looks fine.

http://s7u.blogspot.com

Regards, Shahib