如何让表列保持完好，而另一个移动

Question

我不知道如何让第一列（行列）留在原地，而第二列（食品名称）可以移动，因为它更新数据库移动时。

我试着制作只坐在桌旁的div，但是当我重新调整窗口引导程序大小时，它改变了桌子，并且它们不再排队。

JSFiddle我是JSFiddle的新手，表似乎无法正常工作。 Here is the source code.我为轨道使用this bootstrap table。

这里是模板代码：

<h3>Rank the selected foods from most to least problematic </h3> 


<div class="panel panel-default" style="max-width: 400px"> 
    <table class="table table-bordered table-striped" id="sortable"> 
    <col style="width: 10%"> 
    <thead> 
     <tr> 
     <th> 
      Rank 
     </th> 
     <th> 
      Food 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <% @food.each_with_index do |food, i| %> 
     <tr data-item-id=<%= "#{food.id}" %> class="item"> 
      <td style="font-size: 1.2em; text-align: center"> <!--dont let this td rearrange--> 
      <%= i + 1 %> 
      </td> 
      <td> 
      <%= @food.find(food).name %> 
      </td> 
     </tr> 
     <% end %> 
    </tbody> 
    </table> 
</div> 

它不工作，使用的答案在这里找到：Fix First Column of a Bootstrap Table

Answer 1

我把它用位置的工作：绝对的，然后空格： nowrap，所以当它调整大小时，它不会增大列数。