在所有设备尺寸上具有固定标题的引导响应表？

Posted 2023-03-06

【中文标题】在所有设备尺寸上具有固定标题的引导响应表？

【英文标题】：Bootstrap responsive table with fixed headers on all device sizes?

【发布时间】：2019-10-03 00:22:20

【问题描述】：

我目前有这个 Bootstrap 表，我面临的问题是粘性标题在不删除 Bootstrap .table-responsive 类的情况下无法正常工作。不使用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>

【问题讨论】：

我不这么认为。就在今天，我通过执行 $('.container').off('scroll') 并附加 CSS 位置来修复 JQuery tablesorter 上的粘性标题问题：粘性。如果我们更新tablesorter，JQuery tablesorter使用CSS而不是JS进行更新以进行粘性定位，也许看看Bootstrap表是否有相似之处？祝你好运，如果你弄清楚了，请告诉我。

这是一个已知问题，请参阅：***.com/a/44004100/2757519

@ImmortalDude 如果我删除了表格响应类，那么它的工作方式与该帖子类似，但我需要表格也具有响应性。

【参考方案1】：

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

从头上移除棍子位置并只保留在头上 添加overflow-x：对表响应类可见。

谢谢