jquery-ui sortable table - selected row resizing table and table row contents shift

Question

My codepen has a jquery-ui sortable on a table. A few problems that I see are: 1) selecting a row to drag adjusts table width during selection, but resumes to the correct table width after it is dropped. 2) The selected table row shifts outside of left border of the table containment. 3) The selected table row loses the table styling. The data scrunches up apparently losing its default padding-right of 10px.

I am running Windows 7 and use chrome browser rev 56.0.2924.87 May someone can answer me the redundant need to post code before one can post? Putting the bare minimum code here. See pen for full code.

<table class="playlist-table">

Answer 1

I was unable to find this question prior to posting my problems:

jquery UI Sortable with table and tr width

Thanks go to Yaroslav for this helper class that fixed issue#3. The selected table row now preserves styling after being selected.

.ui-sortable-helper {
    display: table;
}

And to Keith, his code fixed issues 1) selecting a row to drag adjusts table width during selection. 2) The selected table row shifts outside of left border of the table containment.

$('td, th', '.playlist-table').each(function () {
    var cell = $(this);
    cell.width(cell.width());
});