title: sorting tr elements with nested tables, hide nested tbody while sorting
body: <p>I've got a ...very... nested set of tables. </p>
  
  <p>Here's my DOM:</p>
  
  <pre><code>&lt;table id="sortable"&gt;
      &lt;thead&gt;...&lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="draggable_item"&gt;
              &lt;td&gt;
                  &lt;table&gt;
                      &lt;thead class="show_this_while_dragging"&gt;...&lt;/thead&gt;
                      &lt;tbody class="hide_this_while_dragging"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;...&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Each tr in table#sortable is draggable. When it's being dragged, I want to hide the tbody in the table inside <em>each</em> tr.draggable_item. </p>
  
  <p>Here's how I initialize my sortable:</p>
  
  <pre><code>$( selector ).sortable({
      helper: fixHelper
  });
  
  $( selector ).sortable( "option", "start", function(event, ui) { start_callback(selector) } );
  
  function start_callback(selector)
  {
      $(selector + " table tbody").hide();
  }
  </code></pre>
  
  <p>This works almost as expected. Each tbody disappears, even the one that is being dragged. But there's extra space where the tbody was in the currently dragged item. </p>
  
  <p>I am not sure what's causing it, or how to remove it. The height of the tr.draggable_item that is being dragged is locked as soon as I start dragging the item. </p>