Question

我目前有这个Bootstrap表，而我面临的问题是，如果不删除Bootstrap .table-sensitive类，粘性标头就无法正常工作。不用JS可以做到吗？

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-fixed {
  width: 100%;
}


/* This will work on every browser but Chrome Browser */

.table-fixed thead {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
  background-color: #FFF;
}


/*This will work on every browser*/

.table-fixed thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: #FFF;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table-responsive">
  <table class="table table-striped table-fixed">
    <thead>
      <tr>
        <th>Test</th>
        <th>Test</th>
      </tr>
    </thead>
  </table>
</div>

Answer 1

位置粘性不适用于 Chrome 中的某些表格元素 (thead/tr)。您已在 thead 和 th 中添加了粘性位置。尝试以下步骤。

从顶部移除操纵杆位置并仅保留在 th
添加溢出-x：对表响应类可见。

谢谢

在所有设备大小上具有固定标头的Bootstrap响应表？

1 个答案: