拖动第一行时,jQuery-UI可排序表调整大小列

Question

我有一个HTML表,使用jQuery-UI标记为sortable(),拖动时行重新排序,但是如果拖动第一行,则浏览器会自动重新调整第一列的大小.在Chrome中,它仍然是这种方式(错误地),但在IE和Firefox中,它们在我放弃行后将恢复正常.

我认为这与我将表格的宽度设置为100%有关,但我希望尽可能保持表格覆盖整个屏幕.

这是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(){$(这个).width($(this).width());}); return ui;}});

Answer 1

将CSS .sfTable table-layout从固定更改为自动.

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