Ruby on Rails表格进度栏导致单元格溢出问题求助

我来帮你搞定这个进度栏导致单元格溢出的问题！先梳理下代码里的几个关键问题，然后给出具体的修复方案：

问题根源分析 #

1. 标签结构错误：你直接给<td>加了Bootstrap的progress类，这不符合组件的使用规范；同时最后一个<td>没有正确闭合，进度栏的div还重复添加了progress-bar类，容易引发样式冲突。
2. 容器宽度未适配：Bootstrap的progress组件需要独立的容器，且内部进度栏没有设置自适应单元格宽度，导致内容超出单元格边界。
3. 表格溢出控制不足：仅给表格和行设置overflow: hidden不够，需要针对进度栏所在的单元格做更精准的约束。

修复后的完整代码 #

<table class="table table-hover table-bordered" style="table-layout: fixed; width: 100%;">
  <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>
    <% @brand_orders.each do |post| %>
      <tr class='clickable-row' data-href='url://'>
        <td><%= post.id %></td>
        <td><%= post.created_at %></td>
        <td><%= "#{post.first_name} #{post.last_name}" %></td>
        <td style="padding: 0; overflow: hidden;">
          <div class="progress" style="margin: 0; width: 100%;">
            <% if post.status? == "Not Started" %>
              <div class="progress-bar progress-bar-success 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-striped progress-bar-animated active" role="progressbar" style="width:33%">
                Not Started
              </div>
              <div class="progress-bar progress-bar-warning progress-bar-striped progress-bar-animated active" role="progressbar" style="width:33%">
                In Progress
              </div>
              <div class="progress-bar progress-bar-danger progress-bar-animated active" role="progressbar" style="width:0%"></div>
            <% else %>
              <div class="progress-bar progress-bar-success progress-bar-striped progress-bar-animated active" role="progressbar" style="width:33%">
                Not Started
              </div>
              <div class="progress-bar progress-bar-warning progress-bar-striped progress-bar-animated active" role="progressbar" style="width:33%">
                In Progress
              </div>
              <div class="progress-bar progress-bar-danger progress-bar-striped progress-bar-animated active" role="progressbar" style="width:34%">
                Completed
              </div>
            <% end %>
          </div>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

关键修改说明 #

• 表格布局优化：添加table-layout: fixed; width: 100%;，让表格列宽度更可控，避免内容过度撑开列导致溢出。
• 标签结构修正：移除<td>上的progress类，改为在单元格内嵌套独立的<div class="progress">容器，同时补全了未闭合的<td>标签。
• 容器自适应设置：给progress容器加margin: 0; width: 100%;，让它完全适配单元格宽度，去掉默认margin避免额外空间占用。
• 单元格溢出约束：给进度栏所在<td>设置padding: 0; overflow: hidden;，确保内部内容不会超出单元格边界。
• 清理冗余样式：移除了进度栏div中重复的progress-bar类，避免样式冲突。

如果还有轻微的文字溢出问题，可以给进度栏加个文字省略样式：

.progress-bar {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者anon anon