JQueryUI Sortable - Hidden col

Table is resized when some cols are hidden by CSS

by bdesprez_thalassa

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<html>
  <body>
  <table id="sort1" class="fullsize">
  <thead><tr>
    <th class="hidden">hide</th>
    <th class="hidden">hide</th>
    <th class="hidden">hide</th>
    <th class="fix30">Test1</th>
    <th>Test2</th>
    <th class="fix100">Test3</th>
    <th class="fix100">Test4</th>
    <th class="fix100">Test5</th>
  </tr></thead>
  <tbody>
    <tr>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
  </table>
  
  <hr />
  
    <table id="sort2" class="fullsize">
  <thead><tr>
    <th class="hidden">hide</th>
    <th class="hidden">hide</th>
    <th class="hidden">hide</th>
    <th class="fix30">Test1</th>
    <th>Test2</th>
    <th class="fix100">Test3</th>
    <th class="fix100">Test4</th>
    <th class="fix100">Test5</th>
  </tr></thead>
  <tbody>
    <tr>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td class="hidden">hide</td>
      <td>1</td>
     ...

CSS

#sort2 .hidden {
  display: none;
}
.fullsize {
  width: 100%;
}
.fix30 {
  width: 30px;
}

.fix100 {
  width: 100px;
}

JavaScript

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
};

$("tbody").sortable({
    helper: fixHelperModified 
    
}).disableSelection();