title: jQuery sortable table rows - rows change height after sorting
body: <p>I'm trying to use jQuery UI sortable on a table, and am experiencing a problem. Once i drop a row the height is not exactly what it was before. It gets smaller and the rows don't use up the whole table for some reason.</p>
  
  <p>What could I do to prevent this? It is very visible when only 2 rows are in the table, but barely noticeable when many rows are available, still I would like to have control over this.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This is about what happens in the sortable table, not the result table.</p>
  
  <p>Apparently this problem only occurs in webkit, but not in Mozilla or IE.</p>
  
  <p><strong>Demo:</strong></p>
  
  <p><a href="http://jsbin.com/ucopun/66/edit" rel="nofollow noreferrer">http://jsbin.com/ucopun/66/edit</a></p>
  
  <p><strong>Here is my js Code:</strong></p>
  
  <pre><code>$(document).ready(function() {
      //sort
      $("#myTable").on('click', '.up, .down', function(event) {
          var row = $(this).closest("tr");
          if ($(this).is(".up")) {
              row.insertBefore(row.prev());
          } else {
              row.insertAfter(row.next());
          }
          row.fadeOut();
          row.fadeIn();
      });
      //fix dd width of rows
      $(function() {
          var fixHelper = function(e, ui) {
              ui.children().each(function() {
                  $(this).width($(this).width());
              });
              return ui;
          };
  
          $("#myTable tbody").sortable({
              helper: fixHelper
          });
          $("#myTable tbody").disableSelection();
      });
  
      //buttons  
      var savebtn = "&lt;div class=\"save\"&gt;Save&lt;/div&gt;";
  
      var editbtn = "&lt;div class=\"edit\"&gt;Edit&lt;/div&gt;";
  
      var removebtn = "&lt;div class=\"remove\"&gt;Remove&lt;/div&gt;";
  
      var upbtn = "&lt;a class=\"up\"&gt;up&lt;/a&gt;&lt;a class=\"down\"&gt;down&lt;/a&gt;";
  
      $("#target").click(function() {
          //add  
          var speise = $(".addnew").val();
          var beschr = $(".addnew2").val();
          $('#myTable tr:last').after('&lt;tr class="frst"&gt;&lt;td class="content"&gt;&lt;span class="speise"&gt;' + speise + '&lt;/span&gt;&lt;span class="beschr"&gt;' + beschr + '&lt;/span&gt;&lt;/td&gt;&lt;td class="btns"&gt;' + removebtn + '&lt;/td&gt;&lt;td class="btns"&gt;' + editbtn + upbtn + '&lt;/td&gt;&lt;/tr&gt;');
      });
      $("#myTable").on('click', '.remove', function(event) {
          $(this).parent().parent().remove();
      });
  
      //edit
      $("#myTable").on('click', '.edit', function(event) {
          var speise = $(this).closest("tr").find(".speise").text();
          var beschr = $(this).closest("tr").find(".beschr").text();
          $(this).closest("tr").find(".content").html('&lt;input class="sp" value="' + speise + '"/&gt;&lt;br&gt;&lt;input class="be" value="' + beschr + '"/&gt;');
  
          $(this).parent().html(savebtn);
  
      });
  
      //save
      $("#myTable").on('click', '.save', function(event) {
          var speise = $(this).closest("tr").find(".sp").val();
          var beschr = $(this).closest("tr").find(".be").val();
          $(this).closest("tr").find(".content").html('&lt;span class="speise"&gt;' + speise + '&lt;/span&gt;&lt;span class="beschr"&gt;' + beschr + '&lt;/span&gt;');
  
          $(this).parent().html(editbtn);
  
      });
      //result
  });
  
  $("button").click(function() {
      var data = "";
      $("#myTable tr td:first-child").each(function() {
          data += "&lt;tr&gt;&lt;td&gt;" + $(this).text() + "&lt;/td&gt;&lt;/tr&gt;";
      });
      $(".result").html(data);
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table id="myTable"&gt;
    &lt;tr&gt;
      &lt;td class="content"&gt;
        &lt;span class="speise"&gt;SPEISE&lt;/span&gt;
        &lt;span class="beschr"&gt;BESCHREIBUNG&lt;/span&gt;
      &lt;/td&gt;
      &lt;td class="btns"&gt;
        &lt;div class="remove"&gt;REMOVE&lt;/div&gt;&lt;/td&gt;
      &lt;td class="btns"&gt;
        &lt;div class="edit"&gt;edit&lt;/div&gt;
        &lt;a class="up"&gt;up&lt;/a&gt;
      &lt;a class="down"&gt;down&lt;/a&gt;
      &lt;/td&gt;
  
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td class="content"&gt;
              &lt;span class="speise"&gt;SPEISE&lt;/span&gt;
        &lt;span class="beschr"&gt;BESCHREIBUNG2&lt;/span&gt;
  
        &lt;/td&gt;
      &lt;td class="btns"&gt;
        &lt;div class="remove"&gt;REMOVE&lt;/div&gt;&lt;/td&gt;
            &lt;td class="btns"&gt;
        &lt;div class="edit"&gt;edit&lt;/div&gt;
  
       &lt;a class="up"&gt;up&lt;/a&gt;
      &lt;a class="down"&gt;down&lt;/a&gt;
        &lt;/td&gt;
  
    &lt;/tr&gt;
  
  &lt;/table&gt;
    Speise&lt;br&gt;
    &lt;input class="addnew" type="text" id="name" /&gt;
    &lt;br&gt;Beschreibung &lt;br&gt;
    &lt;input class="addnew2" type="text" id="name" /&gt;
  &lt;div id="target"&gt;Add&lt;/div&gt;
  &lt;div id="target2"&gt;Add2&lt;/div&gt;
    &lt;button&gt;Result me&lt;/button&gt;
    &lt;div&gt;&lt;table class="result"&gt;&lt;/table&gt;&lt;/div&gt;
    &lt;div class="test"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>table {
      border:solid black 1px;
      height:200px;
  }
  td {
    border:solid 1px red;
  }
  #target {
      width:50px;
      border:solid red 2px;
  }
  .remove {
    color:red;
      font-wieght:bold;
  }
  .result {
    border:solid red 2px;
  }
  
  td span, a {
    display:block;
  }
  a {cursor:pointer;}
  tr {
    cursor:move;
  }
  .btns {
    cursor:auto;
  }
  </code></pre>
  
  <p>Also if there is a simple way to do drag &amp; drop sorting without jQuery UI but only with jQuery I would appreciate a link, as I feel this problem, and many others are created by jQuery UI.</p>