How to make bootstrap progressbar span full width between <td>?

Question

How can we get the bootstrap progress bar to span the full width between the two badges?

I tried this, but it didn't solve the problem:

.progress {
margin-bottom: 0px;
width: 70%;
}

The index:

  <tr>
    <td>
      <button class="btn btn-primary" type="button">
      Level <span class="badge"><%= challenged.current_level %></span>
      </button>
    </td>
    <td>
      <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10" style="width: 60%;">
      <%= challenged.current_level %>
      </div>
      </div>
    </td>
    <td>
      <button class="btn btn-primary" type="button">
      Strike <span class="badge"><%= [params[:missed]].flatten.length %></span>
      </button>
    </td>
  </tr>

EDIT

Full index

 <table>
    <% @habits.each do |challenged| %>
    <tbody>
          <tr>
              <td>
                  Level <span class="badge"><%= challenged.current_level %></span>
              </td>
              <td>
                  <div class="progress">
                      <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10" style="width: 60%;">
                          <%= challenged.current_level %>
                      </div>
                  </div>
              </td>
              <td>
                  Strike <span class="badge"><%= [params[:missed]].flatten.length %></span>
              </td>
          </tr>
        <tr>
          <td><span class="label label-primary">AFTER I</span> <%= challenged.trigger %>,
          <span class="label label-primary">I WILL</span>
            <%= raw challenged.tag_list.map { |t| link_to t.titleize, tag_path(t), class: 'label label-info' }.join(' ') %>
          <span class="label label-primary">UNTIL</span> <%= challenged.target %>
          <span class="label label-primary">SO I CAN</span> <%= challenged.reward %>
            <span class="label label-primary"><%= challenged.committed.map { |d| d.titleize[0,3] }.join ', ' %></span></td>
        </tr>
    </tbody>
  <% end %>
  </table>

I tried such things as removing td's adding td's, changing div's so I think I narrowed it down to having to override something in the progress bar default code.

Thank you for your time!

Answer 1

Try adding width: 100%; to the middle cell:

HTML:

<table class="table">
    <tbody>
        <tr>
            <td>Level <span class="badge">1</span></td>
            <td class="stretch vam">
                <div class="progress m0">
                    <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10" style="width: 60%;">text</div>
                </div>
            </td>
            <td>Strike <span class="badge">1</span></td>
        </tr>
        <tr>
            <td colspan="3">
                <span class="label label-primary">Label</span> more text
                <span class="label label-primary">Label</span> more text
                <span class="label label-primary">Label</span> more text
                <span class="label label-primary">Label</span> more text
                <span class="label label-primary">Label</span> more text
            </td>
        </tr>
    </tbody>
</table>

CSS:

td.stretch {
    width: 100%;
}

JSFiddle demo: