How do I make these table cells sortable?

Question

How do I make these table cells sortable without having the cells pour over the fixed width tbody container? When I move a cell into a row above or below, the cell in the 3rd column will pour over the container and not go down into the column below or above.....here is my code...

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>

Answer 1

it's a css probleme: the margin cell, the padding, the border table take place in your 300 px div, so your 3 100 px td haven't enought space.

you should use

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

instead of

width: 100px;

Answer 2

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