具有粘性表头的响应式Bootstrap表格

Question

我有一张表格。我只添加了以下CSS代码到标准的Bootstrap库，以实现固定表头：

.table-sticky th {
  background: #fff;
  position: sticky;
  top: -1px;
  z-index: 990;
}

<div class="table-responsive p-0 mt-2">
  <table class="table table-sm table-striped table-hover table-sticky">
    <thead>
      <tr>
        <th>#</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1,001</td>
        <td>Lorem</td>
        <td>ipsum</td>
        <td>dolor</td>
        <td>sit</td>
      </tr>
      <tr>
        <td>1,002</td>
        <td>amet</td>
        <td>consectetur</td>
        <td>adipiscing</td>
        <td>elit</td>
      </tr>
    </tbody>
  </table>
</div>

粘性标题在将表格包装在 div.table-responsive 中之前是有效的。如何让它们共存？

- Mooseman

Answer 1

在没有重新实现后者的情况下，无法在 .table-responsive 内使用 position: sticky。

我的解决方案是在不需要响应式表格时使用 .table-responsive-sm，以拒绝这种权衡。

- Mooseman

---

使用.table-responsive-sm仍然无法使用粘性标题。 - Patrick_870206

Answer 2

在这种情况下，您需要自己编写代码。以下JS代码将完成此任务：

var element = document.getElementById("fixed-thead");
var parentElement = element.parentElement;
window.addEventListener('scroll', () => {
    var coordinates = parentElement.getBoundingClientRect();
    if (coordinates.y < 0) {
        element.style.transform = 'translate3d(0, ' + (-coordinates.y) + 'px, 0)';
    } else {
        element.style.transform = 'translate3d(0,0,0)';
    }
});

在你的表格中，像这样用 id="fixed-thead" 标记 thead：

<thead id="fixed-thead">

我使用translate3d来启用硬件加速，使其更加流畅。如果用户使用鼠标滚轮滚动，滚动事件会非常频繁触发，建议使用滚动事件的防抖动。

如果您的表格中有固定宽度的列，可以使用设置position:fixed和top:0，而不是translate3d。但是在变长情况下，translate3d更受欢迎。

如果您需要将此代码应用于页面上的多个页面，请使用以下代码：

function applyFixedHeader(element) {
var parentElement = element.parentElement;
    window.addEventListener('scroll', () => {
        var coordinates = parentElement.getBoundingClientRect();
        if (coordinates.y < 0) {
            element.style.transform = 'translate3d(0, ' + (-coordinates.y) + 'px, 0)';
        } else {
            element.style.transform = 'translate3d(0,0,0)';
        }
    });
}

var elements = document.querySelectorAll("{yourSelector, e.g. `.table-fixed` for the tables containing class `table-fixed`}");
elements.forEach(element => applyFixedHeader(element));

- michal.jakubeczy

---

对于那些复制粘贴代码的人，结尾处缺少");"。 x) - Rafael Pereira

有没有办法在同一页上为两个单独的表格创建自己的固定标题？比如说，如果不是“id”，而是“class ='fixed-thead'”怎么办？ - peppy

@peppy 是的，你可以通过选择器选择多个元素，然后在所有元素上应用此代码。唯一需要改变的是，你需要迭代所有选定的元素并在它们上应用此代码以使其正常工作。我已经修改了答案以涵盖这种情况。 - michal.jakubeczy

Answer 3

如果不添加任何CSS，您可以通过从div中删除table-responsive并将class="bg-white sticky-top border-bottom"类添加到table标记来固定表头。像这样

<div class="table">
  <table class="table">
   <thead>
    <tr>
     <th class="bg-white sticky-top border-bottom">FirstName</th>
     <th class="bg-white sticky-top border-bottom">LastName</th>
     <th class="bg-white sticky-top border-bottom">Class</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>John</td>
       <td>Cooker</td>
       <td>A1</td>
     </tr>
     <tr>
       <td>David</td>
       <td>Jeferson</td>
       <td>A2</td>
     </tr>
     ...
  </table>
</div>

- Salim Hamidi

---

那么响应性就消失了，对吧？ - buddhiv

是的。尝试使用class="table-responsive-sm"来使表格在小断点下水平滚动。 - undefined