テーブルの列を元通りに維持する方法

Question

最初の列（ランク）を維持する方法を理解することはできませんが、2番目の列（食品名）はその列を更新しながら移動することができます彼らが動くときデータベース。

私はちょうど場所で隣のテーブルに座っ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

を、私はそれが位置使用して動作するようになった：絶対、その後、ホワイトスペースを：ので、サイズが変更されたときには、それは、列を大きくしていませんでした。