slideToggle() on <tr> causes "jump"

Question

When using jQuery slideToggle() function to show/hide data on a new row in a table it causes it to stutter. Yet, when using slideToggle() to show/hide a <div> it works very smoothly.

Can anyone tell me why this happens?

Fiddle example: http://jsfiddle.net/gLGUG/

jQuery code:

$("tr").click(function () {
    $(".slideMe").slideToggle();
});

$(".slideMeDiv, button").click(function () {
    $(".slideMeDiv").slideToggle();
});

HTML Markup:

<table>
    <tr>
        <td>One Row</td>
    </tr>
    <tr>
        <td>Click me</td>
    </tr>
    <tr class="slideMe">
        <td>SlideDOWN</td>
    </tr>
</table>
<br />
<button>Slide Div</button>

<div class="slideMeDiv">
    Slide me as well
</div>

Answer 1

Mention the border="0" cellspacing="0" cellpadding="0" in the table

<table width="100%" border="0" cellspacing="0" cellpadding="0">

this will solve the jumping issue

Here is the jsFiddle File

---

Also for sliding effect you need to wrap your text with a div and place the div in-side the td

here is the updated jsFiddle File

Answer 2

I just do this in my js

$(document).ready(function(){
    $('tr').click(function(){
        $('.slideMe').slideToggle();
        $('.slideMe').css("display", "block")
    });
});

This stops the tr tag displaying as table-row which doesn't work with a slide toggle