jQuery sortable keep table's width

var fixHelper = function(e, ui) {    ui.children().each(function() {    console.log(e);    $(this).width($(this).width());    });    return ui;  };$("#sortable1 tbody").sortable({      helper: fixHelper  }).disableSelection();

JSfiddle

Source article

How about this:

$("#sortable1").sortable({        items: "tbody:not([not-sortable])",        helper: 'clone',        cursor: "move",        zIndex: 9999,        start: function (event, ui) {            $(ui.item[0]).show().css('opacity','0');        },        stop: function (event, ui) {            $(ui.item[0]).css('opacity','1');        }    });

You are basically cloning the element and instead of hiding it whilst moving, you just apply opacity of 0 and then applying opacity of 1 once dropped. I didn't really have time to test it.

This is the code I use for this. I create a helper function that gets the height and width of everything in the row and then explicitly sets it to those heights and widths, plus adds a row back in as a placeholder.

var fixHelper = function (e, ui) {    ui.children().each(function () {        if ($(this).children().length > 0) {            fixHelper(e, $(this));        }        if(parseInt($(this).css("margin-left")) != 0)            $(this).css("margin-left", $(this).css("margin-left"));        if (parseInt($(this).css("margin-right")) != 0)            $(this).css("margin-right", $(this).css("margin-right"));        $(this).width($(this).realWidth(true));        $(this).height($(this).realHeight(true));    });    ui.height(ui.realHeight());    return ui;};var unfixHelper = function (ui) {    ui.children().each(function () {        if ($(this).children().length > 0) {            unfixHelper($(this));        }        $(this).css("margin-left", "");        $(this).css("margin-right", "");        $(this).css("width", "");        $(this).css("height", "");    });    ui.css("height", "");};var sortableOptions = new Object({    items: "tbody:not([not-sortable])",    cursor: "move",    zIndex: 9999,    helper: fixHelper,    start: function (e, ui) {        ui.placeholder.height(ui.item.height());        ui.placeholder.html("<td colspan=\"10\"> </td>");    },    stop: function (e, ui) {        unfixHelper(ui.item);        ui.placeholder.html("");    }   });jQuery("#sortable1").sortable(sortableOptions);

Another file (real-dimensions.js):

$.fn.realWidth = function (inner) {    var $t = $(this);    var rect = this[0].getBoundingClientRect();    var width;    if (rect.width) {        // `width` is available for IE9+        width = rect.width;    } else {        // Calculate width for IE8 and below        width = rect.right - rect.left;    }    if (inner)        width -= parseInt($t.css("padding-left")) + parseInt($t.css("padding-right"));    return width;}$.fn.realHeight = function (inner) {    var $t = $(this);    var rect = this[0].getBoundingClientRect();    var height;    if (rect.height) {        // `height` is available for IE9+        height = rect.height;    } else {        // Calculate height for IE8 and below        height = rect.top - rect.bottom;    }    if (inner)        height -= parseInt($t.css("padding-top")) + parseInt($t.css("padding-bottom"));    return height;}