JQueryUI 可排序的 thead 和 tbody 在拖动隐藏两个字段的行时收缩

我有一个包含不同行和字段的表。在一行中我有两个字段display:none;当我拖动这些行时，会产生类似于横向填充的效果<tbody>和<thead>，表格没有缩小，表格的元素是缩小的。

在下一个 JsFiddle 中，第一行无法正常工作，但在第二行中只有一个字段display:none;有用。

如果有任何问题就问吧。

Errors example

拖动时的表格：

起初我以为可以通过查找数量来解决<td>元素与类.hidden-td（有一个类display: none;) 并查找具有该类的元素.placeholder-style（是具有<tr>进行拖动时生成的）并添加许多<td>正如在<tr>我正在移动，但没有移动，这是行不通的。

我知道有多少领域有类.hidden-td用这条线

var numcells = $('.hidden-td').length;

Problem

我的第一行有 9 个元素，另一行有 8 个元素。在我的函数中start()我只在占位符中隐藏了一列，因此当我拖动第一行时，还剩下一列而不应用该类.hidden-td这就是为什么列的末尾有一个空格。

我怎样才能解决这个问题？

https://jsfiddle.net/w52m5ggb/20/

在过去的几天里，我自己一直在与可排序插件作斗争，我认为需要进行以下更改：

1. 添加帮助器函数以在帮助器（可拖动对象）上创建正确的大小，以获得正确的大小。

2. 在开始函数中，将项目 html 添加到占位符 html 中，以使占位符与原始内容保持相同。

Code:

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    placeholder: "placeholder-style",
    start: function(event, ui) {
      $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')

      //copy item html to placeholder html

      ui.placeholder.html(ui.item.html());

      //hide the items but keep the height/width. 
      ui.placeholder.css('visibility', 'hidden');
    },
    stop: function(event, ui) {
        ui.item.css('display', '')
    },

    //add helper function to keep draggable object the same width
    helper: function(e, tr)
    {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index)
        {
        // Set helper cell sizes to match the original sizes
        $(this).width($originals.eq(index).width());
        });
        return $helper;
    },
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        location.reload();        
       });
    }
}).disableSelection();

更新了小提琴