Ячейка стола с индикатором кровотечения

Question

Я занимаюсь разработкой приложения ruby ​​on rails, в котором есть таблица, в которой одна из данных таблицы представляет собой индикатор выполнения. Проблема в том, что ячейка таблицы истекает кровью. Я пытался заставить что-то работать, добавляя стили, но, похоже, ничего не работает. Когда я вынимаю индикатор выполнения, он не истекает кровью.

Любые решения будут с благодарностью!

Вот мой код:

<table class="table table table-hover table-bordered" style = "overflow: hidden"  >
  <thead class="thead-light">
    <tr>
      <th scope="col">Order ID</th>
      <th scope="col">Date</th>
      <th scope="col">End Customer</th>
      <th scope="col">Order Status</th>
    </tr>
  </thead>
  <tbody>
    <!--< Progress Bar -->
    <% @brand_orders.each do |post| %> 
      <tr class='clickable-row ' style = "overflow: hidden" data-href='url://'>
        <td><%= post.id %></td>
        <td><%= post.created_at %></td>
        <td><%= post.first_name %> <%= post.last_name %></td>   
        <td class="progress">
          <!--<%= post.status?%> -->
          <% if post.status? == "Not Started" %>
            <div class="progress-bar progress-bar-success progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" style="width:33%">
              Not Started
            </div>
            <div class="progress-bar progress-bar-warning progress-bar-animated active" role="progressbar" style="width:0%"></div>
            <div class="progress-bar progress-bar-danger progress-bar-animated active" role="progressbar" style="width:0%"></div>

          <% elsif post.status? == "In Progress"%>
            <div class="progress-bar progress-bar-success progress-bar progress-bar-striped progress-bar-animated active"role="progressbar" style="width:33%">
              Not Started
            </div>
            <div class="progress-bar progress-bar-warning progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" style="width:33%">
              In Progress
            </div>
            <div class="progress-bar progress-bar-danger progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" style="width:0%"></div>

          <% else %>
            <div class="progress-bar progress-bar-success progress-bar progress-bar-striped progress-bar-animated progress-bar-animated active" role="progressbar" style="width:33%">
              Not Started
            </div>
            <div class="progress-bar progress-bar-warning progress-bar progress-bar-striped progress-bar-animated progress-bar-animated active" role="progressbar" style="width:33%">
              In Progress
            </div>
            <div class="progress-bar progress-bar-danger progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" style="width:34%">
              Completed
            </div>
          <% end %>
        <td>
      </tr>
    <% end %>
  </tbody>
</table>