当第一行被拖拽时，jQuery-UI可排序表调整列大小列

我有一个用jQuery-UI标记为sortable（）的HTML表，当拖动它们时，行重新排序，但如果第一行被拖拽，那么第一行列的大小由浏览器自动重新调整。在Chrome中，它仍然是这种方式（不正确），但在IE和Firefox中，它们将在我放弃该行后恢复正常。当第一行被拖拽时，jQuery-UI可排序表调整列大小列

我认为这与我将表格的宽度设置为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。”）排序（{ 轴： 'Y'，句柄：'.gripper'，助手：函数（e，ui）{} {} {}此）.WIDTH（））; }）; return ui; } }）;

来源

2012-02-22 HackWeight

更改您的CSS .sfTable table-layout从固定到汽车。

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

来源

2012-02-22 23:32:36 neo108

当第一行被拖拽时，jQuery-UI可排序表调整列大小列

回答

相关问题