Сортируемые столбцы в таблице с фиксированным макетом в IE? - PullRequest
Новая
       13

Сортируемые столбцы в таблице с фиксированным макетом в IE?

2 голосов
/ 14 декабря 2010

Я пытаюсь создать таблицу с переставляемыми столбцами, используя «сортируемое» взаимодействие пользовательского интерфейса jQuery.Тем не менее, у меня возникают проблемы в IE с table-layout: fixed.

. Сортируемый объект прикреплен к таблице thead > tr и работает просто отлично.Таблица выглядит правильно, если не перетаскивать заголовок столбца.Однако при перетаскивании IE увеличивает ширину таблицы до 100% и делает столбец перетаскиваемого заголовка шире, чтобы компенсировать разницу.Я попытался указать ширину с помощью <col> элементов (которые, похоже, полностью игнорируются IE?), Установить ширину для каждого <td>, использовать forcePlaceholderSize и комбинации из трех, но, похоже, ничего не работает.

Код указан ниже и на jsFiddle .Обратите внимание, что логика для фактической замены столбцов и корректировки их ширины после завершения перетаскивания не была включена;сейчас меня интересует только (неправильное) поведение при перетаскивании .

HTML: 

<table>
    <col style="width:90px">
    <col style="width:130px">
    <col style="width:70px">

    <thead>
        <tr>
            <th style="width:90px">width 90</th>
            <th style="width:130px">width 130</th>
            <th style="width:70px">width 70</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td style="width:90px">foo</td>
            <td style="width:130px">bar</td>
            <td style="width:70px">baz</td>
        </tr>

        <tr>
            <td style="width:90px">wibble</td>
            <td style="width:130px">wobble</td>
            <td style="width:70px">wubble</td>
        </tr>

        <tr>
            <td style="width:90px">lorem</td>
            <td style="width:130px">ipsum</td>
            <td style="width:70px">dolor</td>
        </tr>
    </tbody>
</table>

CSS: 

table {
    border-collapse: collapse;
    table-layout: fixed;
}

td, th {
    background: white;
    border: 1px solid #999;
    padding: 0 .25em;
}

JS: 

$("thead tr").sortable({
    forcePlaceholderSize: true,
    helper: "clone",
    tolerance: "pointer"
});
...