html table - jQuery toggled tr elements drift down page -

the gist of problem have table every row hidden, , visibility toggled using anchor on row above. works correctly, in browsers (safari , chrome) tr below 1 appeared moves down further should have.

if keep toggling hidden tr next sibling drifts down page.

here bare bones code shows issue (requires jquery)

 <script type="text/javascript">   $(function() { //document ready     $('.details').hide();     $('.show_hide').click(function(event){     event.preventdefault();     $(this).parents('tr').next().slidetoggle('slow');    });     }); //end doc ready  </script>   <style>   table {    width: 500px;   }    .main td {    width: 33%;   }  </style>   <table>   <tr class="main">    <td>title</td>    <td>some detail</td>    <td><a href="#" class="show_hide">show/hide</a></td>   </tr>    <tr class="details">    <td>     sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. pellentesque porttitor aliquet metus accumsan. aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. nullam sed purus nisi, @ venenatis tellus. praesent id magna ac dui congue convallis. duis sit amet arcu eu ipsum tincidunt fermentum. praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, @ rhoncus elit urna nec magna. vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. nam id leo eros, et posuere massa. morbi fermentum egestas nisl, et pharetra urna convallis viverra. maecenas id massa nulla. pellentesque eget urna vel diam interdum sollicitudin sit amet in massa.    </td>   </tr>    <tr class="main">    <td>title 2</td>    <td>some detail 2</td>    <td><a href="#" class="show_hide">show/hide</a></td>   </tr>    <tr class="details">    <td>     sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. pellentesque porttitor aliquet metus accumsan. aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. nullam sed purus nisi, @ venenatis tellus. praesent id magna ac dui congue convallis. duis sit amet arcu eu ipsum tincidunt fermentum. praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, @ rhoncus elit urna nec magna. vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. nam id leo eros, et posuere massa. morbi fermentum egestas nisl, et pharetra urna convallis viverra. maecenas id massa nulla. pellentesque eget urna vel diam interdum sollicitudin sit amet in massa.    </td>   </tr>  </table> 

the above code seems work fine in opera , firefox, issue mentioned above happens in safari , chrome. (haven't tested in ie yet). makes me suspicious webkit related issue.

anyone else found problem? there workaround?

i'm able reproduce problem in chrome jquery 1.4.2, not 1.4.4. in fact, 1.4.4, table row doesn't animate @ -- instead toggles on , off (after delay).

the behavior of slidetoggle on table elements seems undefined. workaround, place <div> around <td> contents , call slidetoggle on instead:

<tr>     <td colspan="3">         <div class="details">             sed scelerisque...         </div>     </td> </tr>