Problems with row height in table with expand /collapse in IE

Question

I have ten rows in my table. All the even rows are hidden by default. The odd rows have a 'plus' icon in the first cell. The plus to be clicked to see the next even row in the table. Clicking the icon again will hide the row again. I do this with simple jquery hide and show methods.

The problem with this in IE is whenever I expand and a row and then close it, the border of the row which was expanded stays in the page itself and does not clear. This makes the pages look awkward in IE. I don't face this issue in FF.

My friend here suspects this has something to do with the cell height.

Im not sure if that is so. So please help me fix this.

Thanks, Cagey.

Answer 1

My friend here suspects this has something to do with the cell height.

He was right, after you hide it you need to append the height, after hide do like this if you are using jquery :

var bodyHeight = $('html').height();
$('html').height(bodyHeight);