JSFiddle - React, Tailwind, and code Playground
HTML
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<h1>table-layout: fixed;</h1>
<table class="fixed">
<tbody class="sort-y">
<tr><td class="fixed-cell">First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
</tbody>
</table>
<h1>table-layout: auto;</h1>
<table class="auto">
<tbody class="sort-y">
<tr><td class="fixed-cell">First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td class="order-handle">handle</td></tr>
<tr><td>First</td><td>Second</td><td...
CSS
table {
width: 100%;
margin: 20px;
border: 1px solid red;
}
table.fixed { table-layout: fixed; }
table.auto { table-layout: auto; }
.fixed-cell { width: 75px; }
JavaScript
$( ".sort-y" ).sortable({
helper: function( e, tr ) {
var children = tr.children(),
helper = tr.clone();
helper.children().each(function( index ) {
$( this ).width( children.eq( index ).width() );
});
return helper;
}
});