當第一行被拖拽時，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可排序表調整列大小列

回答

相關問題