How to get a table column to stay intact while another moves

Question

I can't figure out how to get the first column (ranks) to stay in place while the second column (food names) can get moved around as it updates the database when they move.

I tried making divs that just sat next to the table in place, but when I re-sized the window bootstrap changed the table and they didn't line up anymore.

JSFiddle I am new to JSFiddle and the table doesn't seem to work correctly. Here is the source code. I am using this bootstrap table for rails.

Here is the templated code:

<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>

It does not work to use the answer found here: Fix First Column of a Bootstrap Table

Possible duplicate of [Fix First Column of a Bootstrap Table](http://stackoverflow.com/questions/30449054/fix-first-column-of-a-bootstrap-table) — maximus ツ, Apr 15 '16 at 07:42
I tried this and it breaks my table so that I cannot move any rows — Luke Cramer, Apr 15 '16 at 08:22

score 0 · Accepted Answer · answered Apr 15 '16 at 08:59

0

I got it to work by using position: absolute, and then white-space: nowrap, so that when it got resized, it did not make the columns bigger.

answered Apr 15 '16 at 08:59

Luke Cramer

135
10

How to get a table column to stay intact while another moves

1 Answers1