在<tr>标签内<td>后添加<div>块偏移问题（Bootstrap环境）

你遇到的问题核心是HTML结构不符合表格规范——<tr>标签的直接子元素只能是<td>或<th>，浏览器会自动把<tr>里的<div>移到表格外部，所以才会出现偏移到表格上方的情况。下面给你两个符合规范且适配Bootstrap的解决方案：

方案1：把进度条区块放到最后一个<td>内 #

如果希望进度条和最后一个单元格的内容关联，可以直接把<div>嵌套进最后一个<td>中，再用Bootstrap的间距类调整样式：

<table class="table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </tr>
  <tr>
    <td>Info 1</td>
    <td>Info 2</td>
    <td>Info 3</td>
    <td>
      Info 4
      <!-- 把进度条放到td内部，用mt-2增加上边距 -->
      <div class="progressInfo mt-2">
        <div class="progressBar bg-light p-2 rounded">A horizontal plane progress bar here stating the completion of the work done.</div>
        <div class="textStatus mt-1">209133 left 444444 teams</div>
      </div>
    </td>
  </tr>
</table>

对应的CSS可以优化进度条的视觉效果：

.progressBar {
  height: 24px;
  line-height: 24px;
}

方案2：新增跨列<td>容纳进度条（推荐） #

如果希望进度条占满整行宽度，更合理的做法是新增一个<tr>，里面放一个colspan="4"的<td>（colspan值等于表格的列数），这样既符合HTML规范，又能让进度条自然铺满整行：

<table class="table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </tr>
  <!-- 数据行 -->
  <tr>
    <td>Info 1</td>
    <td>Info 2</td>
    <td>Info 3</td>
    <td>Info 4</td>
  </tr>
  <!-- 进度条行 -->
  <tr>
    <!-- colspan="4" 让单元格跨4列，占满整行 -->
    <td colspan="4" class="p-0">
      <div class="progressInfo p-2">
        <div class="progressBar bg-light p-2 rounded">A horizontal plane progress bar here stating the completion of the work done.</div>
        <div class="textStatus mt-1">209133 left 444444 teams</div>
      </div>
    </td>
  </tr>
</table>

这里用p-0去掉单元格默认内边距，再给内部的.progressInfo加p-2，保证内容和表格其他区域的间距一致，完全适配Bootstrap的样式体系。

关键总结 #

一定要遵守表格的HTML结构规则：<tr>的直接子元素只能是<td>/<th>，否则浏览器的自动修正机制会导致元素位置错乱。上面两种方案都能解决你的问题，根据你需要的布局效果选择即可。

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