Bootstrap 4表格tbody动态Spinner在Chrome/IE中位置异常求助

我碰到过一模一样的兼容性坑！问题根源在于不同浏览器对表格元素的定位规则不一样：Firefox允许给默认display: table-row-group的<tbody>设置position: relative，但Chrome、Edge和IE会直接忽略这个属性，导致你的绝对定位overlay只能找最近的有相对定位的父元素（也就是.table-responsive），所以才会跑到表格上方。

下面给你两个靠谱的解决方案，按需选择：

方法一：用表格原生结构实现（最兼容，推荐） #

这种方法完全不依赖定位，而是通过插入一个跨所有列的表格行来承载spinner，所有浏览器都能正常显示：

1. 修改你的JS代码，动态生成跨列的表格行：

// 先获取表格的列数，确保td能覆盖所有列
const columnCount = $('.bstable thead th').length;
const spinnerHtml = `
  <tr class="loading-row">
    <td colspan="${columnCount}" class="text-center py-4">
      <div class="spinner-grow text-primary spinner-grow-sm"><span class="sr-only">Loading...</span></div>
    </td>
  </tr>
`;
$('.bstable tbody').append(spinnerHtml);

2. 可选的CSS，给加载行加个半透明背景挡住下方内容：

.bstable .loading-row {
  background-color: rgba(255, 255, 255, 0.8);
}

这样spinner会完美居中在tbody区域，还不会破坏表格原有的布局，绝对不会出现跨浏览器问题。

方法二：修正tbody的定位兼容性 #

如果你一定要用定位的方式实现，可以调整tbody的display属性，让它在所有浏览器里都支持position: relative：

1. 更新你的CSS：

.bstable tbody {
  position: relative;
  display: block; /* 把tbody改成块级元素，让relative生效 */
  max-height: 400px; /* 可选：设置最大高度，超出滚动 */
  overflow-y: auto;
}
/* 同步把thead改成块级，保持表格结构 */
.bstable thead {
  display: block;
}
/* 手动设置列宽，避免布局错乱 */
.bstable thead th, .bstable tbody td {
  width: 33.33%; /* 按你的表格列数均分，比如3列就各33.33% */
}

2. JS代码可以保持原来的写法，这样overlay就能正确相对于tbody定位了。不过这种方法需要手动调整列宽，不然表格布局容易乱，所以更推荐第一种方法。

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