Hiding a table row without resizing columns or breaking layout

Question

I want to fold a table so that some rows are hidden.

I want to maintain the size of columns, so that they don't leap around when you hide rows (this happens if you use display: none; indeed, the table width can also change).

I also want the table to reflow when the window size is changed, so that a table full of data uses as much space as the user is willing to give it.

visibility: collapse;

does all of this for me, but that doesn't work in IE (not even IE8; 100% compliant, are we, Microsoft?).

http://stackoverflow.com/questions/147208/hiding-table-rows-without-resizing-overall-width does work in IE, but fixes the table size, so that it will no longer reflow.

Are there any better solutions out there, or should I just give up on this?

Answer 1

Take the example code that works in IE and add some code to detect onresize.

You can either do the calculations based on the original table size, or you can remove the restrictions, do a quick unhide and than reply the hiding code.