css - Bootstrap 4 table tbody 微调器在 chrome 和 Internet explorer 上的位置错误

Question

我想在 table 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>

CSS

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

JS

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>' );

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

See my JSFiddle

不幸的是，我无法理解问题出在哪里。
你能帮我解决我的问题吗？

谢谢

Answer 1

请将微调器添加到表格周围的 div 而不是 JS 中的表格主体。然后用顶部 50% 和左侧 50% 调整它，并通过微调器的高度和宽度减少对齐，以在中间调整它。之后，我从表格的父 div 中删除了底部边距，以使微调器正好位于表格的中间。

var s = '<div class="spinner-grow text-primary spinner-grow-sm mt-2"><span class="sr-only">Loading...</span></div>';

$('.table-responsive').append('<div class="overlay-spinner text-center">' + s + '</div>');

table.table {
  margin-bottom: 0;
}

.table-responsive {
  position: relative;
  margin-bottom: 1rem;
}

.overlay-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1rem;
  margin-left: -1rem;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0);
  /*dim the background*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<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>

</div>