Question

我有一个用jQuery-UI标记为sortable（）的HTML表格，并且在拖动行时会对行重新排序，但是如果拖动第一行，则浏览器会自动重新调整第一列的大小。在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（{ 轴：'y'，句柄：'。抓取器'，助手：function（e，ui）{ ui.children（）。each（function（）{ $（本）.WIDTH（$（本）.WIDTH（））; }）; 回归ui; } }）;

Answer 1

将您的CSS .sfTable table-layout从已修复更改为自动。

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

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

1 个答案: