Css Bootstrap 4 table t车身微调器在chrome和Internet explorer上的位置错误

我想在表tbody bootstrap 4中创建一个动态微调器。 我试过这样做：

HTML

<div class="container mt-2">
 <div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-md-12">
        <div>
          <span class="table-title">table</span>
        </div>
        <hr>
        <div class="table-responsive text-nowrap">
          <table id="contact-list" class="table table-striped table-bordered table-sm bstable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Click</th>
              </tr>
            </thead>
            <tbody>
              <td>a</td>
              <td>b</td>
              <td>c</td>  
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

JS

在firefox中，微调器正确地显示在tbody中，而在其他浏览器chrome、edge、explorer中，微调器显示在表格上方。

不幸的是，我不明白问题出在哪里。 你能帮我解决我的问题吗

---

谢谢

请将微调器添加到桌子周围的div，而不是JS中的表体。然后调整它与前50%和左50%，并减少这个对齐的高度和宽度的纺纱器调整它在中间。之后，我从表父DIV中删除底部边距，以将旋转器精确地放在表中间。

var s='正在加载…'； $'.table responsive'.append+s+； 桌子{ 页边距底部：0； } .表格响应{ 位置：相对位置； 边缘底部：1rem； } .叠加微调器{ 位置：绝对位置； 最高：50%； 左：50%； 边缘顶部：-1rem； 左边距：-1em； z指数：10； 背景色：rgba0,0,0,0； /*调暗背景*/ } 桌子 名称 电子邮件 点击 A. B C 找到下面的解决方案

我已经用装载器的包装器元素的'tr'标记完成了

加载器垂直位于所添加行的中心。 但在添加或删除任何新列时，都需要显式设置colspan，以保持加载程序水平居中

用加载程序动画替换“加载”文本

桌子{ 位置：相对位置； } t车身{ 背景颜色：黄色； 位置：相对位置； } .装货{ 位置：绝对位置； 背景：古色白； 排名：0； 底部：0； 左：0； 右：0； 保证金：自动； 高度：适合的内容； 宽度：适合的内容； } 名称 电子邮件 点击 A. B C A. B C A. B C A. B C A. B C 加载

---

荣誉我正在写这个解决方案，然后你的答案突然出现了谢谢，但是微调器应该显示在顶部的tbody上方，如firefox所示。不幸的是，在我的场景中没有很好地工作。

.bstable tbody {
  position: relative;
}
.bstable tbody .overlay-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

var s = '<div class="spinner-grow text-primary spinner-grow-sm mt-2"><span class="sr-only">Loading...</span></div>;
$( '.bstable' ).find( 'tbody' ).append( '<div class="overlay-spinner text-center">' + s + '</div>' );