jQuery-UIソート可能なテーブルの最初の行がドラッグされたときの列のサイズ変更

Question

jQuery-UIでsortable（）とマークされたHTMLテーブルがあり、行がドラッグされたときに並べ替えられますが、列のサイズはブラウザによって自動的に再調整されます。 Chromeでは、この方法（間違って）のままですが、IEとFirefoxでは行を削除した後に通常の状態に戻ります。

私はテーブルの幅を100％に設定することに関連していると思いますが、可能であれば、テーブル全体を画面全体に広げておきたいと思います。 、 'Y' ： 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"）ソート可能（{ 軸ここで

はjsfiddleですハンドル： '.gripper'、 ヘルパー：function（e、ui）{ ui.children（）。each（function（）{ $（this）.width（$（ this）.width（））; }）; return ui; } }）;

Answer 1

固定 に自動からあなたのCSS .sfTable table-layoutを変更

。

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