IE中固定布局表上的可排序列?

时间:2010-12-14 19:48:39

标签: javascript jquery jquery-ui internet-explorer html-table

我正在尝试使用jQuery UI的“可排序”交互创建一个包含可重新排序列的表。但是,我在使用table-layout: fixed的IE上遇到了麻烦。

可排序附加到表的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"
});

0 个答案:

没有答案