Question

I have an HTML table that is marked as sortable() with jQuery-UI and the rows reorder when they are dragged, however if the first row is dragged then the first column’s size is readjusted by the browser automatically. In Chrome, it remains this way (incorrectly) but in IE and Firefox they will revert to normal after I’ve dropped the row.

I think it’s related to my setting the table’s width to 100%, but I’d like to keep the table spanning the entire screen if at all possible.

Here is the jsfiddle:
http://jsfiddle.net/Ke2V7/5/

HTML
    <table class="sfTable" cellpadding="0" cellspacing="0" style="background-color: red">
    <tr class="sfRow" id="sf60" style="">
        <td class="tdIden" style="background-color: green;">
            a<span class="ui-icon ui-icon-grip-dotted-vertical gripper" style="display:inline-block;" title="Drag to reorder"></span>
        </td>
    <td class="tdSf">    
        <textarea id="txta">Text a.</textarea>
    </td>
</tr>
    <tr class="sfRow" id="sf60" style="">
        <td class="tdIden" style="background-color: green;">
            b<span class="ui-icon ui-icon-grip-dotted-vertical gripper" style="display:inline-block;" title="Drag to reorder"></span>
        </td>
    <td class="tdSf">    
        <textarea id="txtb">Text b.</textarea>
    </td>
</tr>
        <tr class="sfRow" id="sf60" style="">
        <td class="tdIden" style="background-color: green;">
            c<span class="ui-icon ui-icon-grip-dotted-vertical gripper" style="display:inline-block;" title="Drag to reorder"></span>
        </td>
    <td class="tdSf">    
        <textarea id="txtc">Text c.</textarea>
    </td>
</tr>
</table>

CSS:

.sfTable 
{
    table-layout: fixed;
    width: 100%;
}

.sfRow .tdIden 
{
    padding-right: 2px; 
    vertical-align: top; 
    white-space: nowrap;
    width: 25px;
}

.sfRow .tdSf
{
    padding-bottom: 2px;
    padding-top: 3px;
    background-color: blue;
}

Javascript:
$(“.sfTable tbody”).sortable({
axis: ‘y’,
handle: ‘.gripper’,
helper: function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
}
});

Answer 1

change your CSS .sfTable table-layout from fixed to auto.

.sfTable 
{
    table-layout: auto;
    width: 100%;
}