Strange table row show/hide problem

Strange table row show/hide problem

I've got a weird problem that I'm experiencing and I was wondering if it was a known issue.
 
I have a table, and certain rows are created (by server-side script) as follows:-
 
<tr class="PSRow" style="display: none;">
 
I then have a script which is tied to a checkbox:-
 

  1. $(document).ready(

    function() {

  2. $('#PSHide').click(function() {

  3. if ($(this).is(':checked')) {

  4. $('tr.PSRow').hide();

  5. }

  6. else {

  7. $('tr.PSRow').show();

  8. }

  9. });

  10. });

now most of the time this works fine, the table is loaded without the hidden rows being visible, and when you check and uncheck the box they are shown and hidden.  However, sometimes, when there are a lot of hidden rows and only a couple of visible ones (to start with) when you show the rows, all are shown fine, but when you hide them they are hidden but the table bottom stays where it is and leaves space for the now hidden rows, rather than shrinking up to the bottom of the visible area.  If you reload the page, the same thing happens, so it isn't a one off.
 
I am testing this in IE8, and it seems to be ok in some copies but not in others.