如何让表格列在另一个移动时保持不变

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

我通过使用 position: absolute，然后 white-space: nowrap 让它工作，这样当它调整大小时，它不会使列变大。