我正在尝试使用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"
});