How to keep proportion of row with helper jquery sortable-ui

Question

I use sortable plugin to create a table where user can drag and drop the rows to change the order. The plugin works fine but the dragged row does not keep the proportions, for example: when you drag the row, the input inside Apodo and Edad is smaller.

I tried to use the helper, but it looks even worse. How could I keep the proportions?

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;
}

$(function() { 
  $(".table #bodyAliniacion").sortable({
    cursor: 'pointer',
    placeholder: "placeholder",
    forcePlaceholderSize: true,
    axis: 'y',
    dropOnEmpty: false,
    /*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;
    },*/
    start: function (e, ui) {
      ui.item.addClass("selected");
    },

    stop: function (e, ui) {
      ui.item.removeClass("selected");

      $(this).find("tr").each(function (index) {
        let idFila = this.id;
        //if (idFila !== undefined){
        //  $("#ordenJugador-"+this.id.split("-")[1]).val(index+1);
        //}
      });
    }
  }); 
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script
  src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"
  integrity="sha256-6XMVI0zB8cRzfZjqKcD01PBsAy3FlDASrlC8SxCpInY="
  crossorigin="anonymous"></script>
  

<div class="row">
  <div class="col-8">
    <table class="table">
      <thead>
        <th></th>
        <th>Dorsal</th>
        <th>Nombre</th>
        <th>Demarcación</th>
        <th>Titular</th>
        <th>Apodo</th>
        <th>Edad</th>
      </thead>
      <tbody id="bodyAliniacion">
        <tr>
          <td style="width:5%;">
            <img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
          </td>
          <td style="width:7%;">
            <input type="number" min="1" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            Jugador 1
          </td>
          <td style="width:10%;">
            <select>
              <option>Sin demarcación</option>
            </select>
          </td>
          <td style="width:7%; vertical-align: middle;">
            <input type="checkbox" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            <input type="text" class="form-control">
          </td>
          <td style="width:5%; vertical-align: middle;">
            <input type="text" style="width:70%;" disabled>
          </td>
          <td class="float-right; col-12">
            <a style="font-size: x-large;color: red;float: right;">
              <i class="fa fa-arrow-circle-up"></i>
            </a>
            <a style="font-size: x-large;color: red;float: right;margin-right: 15;">
              <i class="fa fa-arrow-circle-down"></i>
            </a>
          </td>
        </tr>
        <tr>
          <td style="width:5%;">
            <img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
          </td>
          <td style="width:7%;">
            <input type="number" min="1" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            Jugador 2
          </td>
          <td style="width:10%;">
            <select>
              <option>Sin demarcación</option>
            </select>
          </td>
          <td style="width:7%; vertical-align: middle;">
            <input type="checkbox" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            <input type="text" class="form-control">
          </td>
          <td style="width:5%; vertical-align: middle;">
            <input type="text" style="width:70%;" disabled>
          </td>
          <td class="float-right; col-12">
            <a style="font-size: x-large;color: red;float: right;">
              <i class="fa fa-arrow-circle-up"></i>
            </a>
            <a style="font-size: x-large;color: red;float: right;margin-right: 15;">
              <i class="fa fa-arrow-circle-down"></i>
            </a>
          </td>
        </tr>
        <tr>
          <td style="width:5%;">
            <img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
          </td>
          <td style="width:7%;">
            <input type="number" min="1" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            Jugador 3
          </td>
          <td style="width:10%;">
            <select>
              <option>Sin demarcación</option>
            </select>
          </td>
          <td style="width:7%; vertical-align: middle;">
            <input type="checkbox" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            <input type="text" class="form-control">
          </td>
          <td style="width:5%; vertical-align: middle;">
            <input type="text" style="width:70%;" disabled>
          </td>
          <td class="float-right; col-12">
            <a style="font-size: x-large;color: red;float: right;">
              <i class="fa fa-arrow-circle-up"></i>
            </a>
            <a style="font-size: x-large;color: red;float: right;margin-right: 15;">
              <i class="fa fa-arrow-circle-down"></i>
            </a>
          </td>
        </tr>
        <tr>
          <td style="width:5%;">
            <img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
          </td>
          <td style="width:7%;">
            <input type="number" min="1" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            Jugador 4
          </td>
          <td style="width:10%;">
            <select>
              <option>Sin demarcación</option>
            </select>
          </td>
          <td style="width:7%; vertical-align: middle;">
            <input type="checkbox" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            <input type="text" class="form-control">
          </td>
          <td style="width:5%; vertical-align: middle;">
            <input type="text" style="width:70%;" disabled>
          </td>
          <td class="float-right; col-12">
            <a style="font-size: x-large;color: red;float: right;">
              <i class="fa fa-arrow-circle-up"></i>
            </a>
            <a style="font-size: x-large;color: red;float: right;margin-right: 15;">
              <i class="fa fa-arrow-circle-down"></i>
            </a>
          </td>
        </tr>
        <tr>
          <td style="width:5%;">
            <img alt="image" src="https://www.w3schools.com/html/pic_trulli.jpg" class="img-reponsive img-sm" width="100%">
          </td>
          <td style="width:7%;">
            <input type="number" min="1" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            Jugador 5
          </td>
          <td style="width:10%;">
            <select>
              <option>Sin demarcación</option>
            </select>
          </td>
          <td style="width:7%; vertical-align: middle;">
            <input type="checkbox" class="form-control">
          </td>
          <td style="vertical-align: middle;">
            <input type="text" class="form-control">
          </td>
          <td style="width:5%; vertical-align: middle;">
            <input type="text" style="width:70%;" disabled>
          </td>
          <td class="float-right; col-12">
            <a style="font-size: x-large;color: red;float: right;">
              <i class="fa fa-arrow-circle-up"></i>
            </a>
            <a style="font-size: x-large;color: red;float: right;margin-right: 15;">
              <i class="fa fa-arrow-circle-down"></i>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

Can be done, hardcoding the styles, for example:

$(function () {
  $(".table #bodyAliniacion").sortable({
    cursor: "pointer",
    placeholder: "placeholder",
    forcePlaceholderSize: true,
    axis: "y",
    dropOnEmpty: false,

    start: function (e, ui) {
      
      ui.item[0].children[0].children[0].style.width = "5%";
      ui.item[0].children[1].children[0].style.width = "48.23px";
      ui.item[0].children[4].children[0].style.width = "49.36px";
      ui.item[0].children[5].children[0].style.width = "48.23px";
      ui.item[0].children[6].children[0].style.width = "25.84px";

    stop: function (e, ui) {},
  });
});

It isn't an elegant way but you can improve it.