Столбец изменения размера сортируемой таблицы jQuery-UI при перетаскивании первой строки - PullRequest
Новая
       9

Столбец изменения размера сортируемой таблицы jQuery-UI при перетаскивании первой строки

2 голосов
/ 23 февраля 2012

У меня есть HTML-таблица, которая помечена как sortable () с помощью jQuery-UI, и при перетаскивании строки переупорядочиваются, однако при перетаскивании первой строки размер первого столбца автоматически корректируется браузером.В 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 () {$ (this) .width ($ (this) .width ());}); return ui;}});

1 Ответ

5 голосов
/ 23 февраля 2012

измени свой CSS .sfTable table-layout с исправлено на авто . 

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