如何讓表列保持完好，而另一個移動

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，所以當它調整大小時，它不會增大列數。