如何在含隐藏列的表格上使用jQueryUI sortable并解决拖拽行表格收缩问题

你的推测方向正确，该问题是两个布局特性叠加导致的：

1. 表格默认使用table-layout: auto自动布局规则，整体宽度由内容动态计算。拖拽过程中原始行被临时移出文档流时，剩余行内容无法撑满原有宽度，就会触发表格收缩。
2. 现有fixHelperModified函数计算单元格宽度时仅取了内容宽度，未包含内边距、边框，导致克隆出的拖拽辅助行和原始行宽度不一致，进一步加剧布局偏移。

步骤1：修改CSS配置（核心修复） #

给表格新增固定布局规则，强制表格按表头定义的列宽渲染，不随内容变化调整整体宽度：

#sort2 .hidden {
  display: none;
}
.fullsize {
  width: 100%;
  table-layout: fixed; /* 新增该行 */
}
.fix30 {
  width: 30px;
}
.fix100 {
  width: 100px;
}

步骤2：优化JS逻辑 #

修改宽度计算逻辑，同时新增占位符尺寸强制配置，保证拖拽过程中占位符不会压缩表格：

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      // 替换为outerWidth，包含单元格内边距、边框宽度
      $(this).width($originals.eq(index).outerWidth())
    });
    return $helper;
};

$("tbody").sortable({
    helper: fixHelperModified,
    forcePlaceholderSize: true // 新增该行，强制占位符和原始行尺寸一致
}).disableSelection();

如果不方便修改表格布局规则，也可以通过sortable的事件回调临时固定表格宽度：在start事件触发时给当前表格设置和当前渲染宽度相等的固定值，在stop事件触发时再恢复为width: 100%即可。

内容的提问来源于stack exchange，提问作者Bruno Desprez