How to Stop Jquery Sortable Table from Changing Table Cell Size
I have a sortable table in jQuery. I can drag the rows up and down and it updates the table correctly, etc. All that is good.
The issue is the appearance of the table while it’s being dragged. For instance, here is my table pre-dragging:
As you can see, the headers are split onto two lines using "\n" (second line is just the placeholder "New line" for now). And the columns are a nice, pleasant size.
When I go to move a row though, the table warps like so:
As you can see, the headers have lost their new line ability (the "\n" seems to have vanished and it just breaks where it runs out of room now). Furthermore, the columns are much wider than they were before.
This makes the whole table look very jumpy because it’s not just the row that moves/changes size, but the whole table.
Once I drop the row, the table goes back to its normal "pretty" appearance.
I don’t mind the row itself changing size if that’s part of how it shows the user it’s moveable, but the table changing its column widths and losing its new line is very frustrating because it makes tracking changes to the row itself more difficult.
Is there a way I can keep table size consistent while the row is being moved? I’ve tried setting widths in the CSS, fixed sizes, etc., but nothing seems to work.
Here is my relevant HTML, Javascript, and CSS code:
<table class='custom_table sortableTable' style='display:inline-block; vertical-align: top; table-layout: fixed;'> <thead class='sortableTableHead'> <tr> <th>20200619.1\nNew line</th> <th>20200709.10\nNew line</th> </tr> </thead> <tbody class='sortableTableBody'> <tr> <th>Metric 1</th> <td>0</td> <td>0</td> </tr> <tr> <th>Metric 2</th> <td>0.01279</td> <td>0.01017</td> </tr> </tbody> </table> jQuery(".sortableTableBody").sortable({ // What to do if we move a row around by hand deactivate: function(event, ui) { // Triggered when sorting stops console.log("Done sorting"); } }); .custom_table { color: white; border-spacing: 10px; border-collapse: separate; } .custom_table th { text-align: center; } .custom_table tbody th { max-width: 30vw; overflow-y: hidden; text-align: right; cursor: move; } .custom_table thead th { cursor: pointer; } .custom_table td { width: 100px; height: 50px; text-align: center; vertical-align: middle; cursor: move; } 
