html - 带有进度条出血的表格单元格

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>

标签： htmlcssruby-on-railsrubyprogress-bar