JQueryUI sortable thead and tbody shrinked while dragging row with two fields hidden

Question

I have a table with different rows and fields. In one row I have two fields with display:none; and when I make the drag of this rows, there is an effect like la

Answer 1

When the placeholder is created, it only takes the number of cell in the row and create an empty row with those cells.

You are adding class hidden-td to nth child 2, so you are hiding one cell. This is OK for rows 2 and up, but not for first row, since you have one more cell in that row. See placeholder for row 2:

For first row:

What you can do is hide every cell in the placeholder and show only the number you need. This can be done with CSS, like this:

.placeholder-style td {
  display: none;
}

.placeholder-style td:nth-child(-n+7) {
  display: table-cell;
}

Result: https://jsfiddle.net/3g3bt80e/1/