如何使这些表格单元格可排序？答案

【问题标题】：How do I make these table cells sortable?如何使这些表格单元格可排序？
【发布时间】：2016-06-06 00:21:09
【问题描述】：

如何使这些表格单元格可排序，而不会将单元格倾倒在固定宽度的 tbody 容器上？当我将一个单元格移动到上方或下方的一行时，第 3 列中的单元格将倾倒在容器上，而不是进入下方或上方的列......这是我的代码......

jQuery

$document.ready(function(){
    $(function() {
        $( "#sortable_grid" ).sortable({
            items: 'td'
            //helper: "clone"
        });

        $( "#sortable_grid" ).disableSelection();
    });
});

CSS

#sortable_grid { 
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 450px;
}
#sortable_grid td {
  margin: 3px 3px 3px 0;
  padding: 1px;
  float: left;
  width: 100px;
  height: 90px;
  font-size: 4em;
  text-align: center;
}

.ui-state-default{
  width:100px;
}

HTML

<table id="sortable" border="1" width="300">
<tbody id="sortable_grid">
    <tr width="300">
        <td width="100" class="ui-state-default">1</td>
        <td width="100" class="ui-state-default">2</td>
        <td width="100" class="ui-state-default">3</td>
    </tr>
    <tr>
        <td width="100" class="ui-state-default">4</td>
        <td width="100" class="ui-state-default">5</td>
        <td width="100" class="ui-state-default">6</td>
    </tr>
    <tr>
        <td width="100" class="ui-state-default">7</td>
        <td width="100" class="ui-state-default">8</td>
        <td width="100" class="ui-state-default">9</td>
    </tr>   
    <tr>    
        <td width="100" class="ui-state-default">10</td>
        <td width="100" class="ui-state-default">11</td>
        <td width="100" class="ui-state-default">12</td>
    </tr>
</tbody>

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

这不是关于您的代码的直接答案，但也许您使用List JS 可能会更幸运。

【讨论】：

【解决方案2】：

这是一个 css 问题：边距单元格、填充、边框表发生在 300 像素的 div 中，因此您的 3 100 像素 td 没有足够的空间。

你应该使用

 #sortable_grid td {
...
  width: 91px;
...
}

而不是

width: 100px;

【讨论】：