JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<h1>table-layout: fixed;</h1>
<table class="fixed">
<tbody class="sort-y">
<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>
<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>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>
...
CSS
table {
width: 100%;
margin: 20px;
border: 1px solid red;
}
table.fixed { table-layout: fixed; }
table.auto { table-layout: auto; }
td { border-top: 1px solid green; }
tr:first-child td { border-top: none; }
.order-handle { cursor: pointer; }
JavaScript
$(".sort-y").sortable({
cursor: 'move',
items: "tr",
handle: ".order-handle",
helper: function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
}
});