带有粘性标题的响应式引导表

Question

我有一张桌子。 我添加到标准 Bootstrap 库的唯一 CSS 是以下用于实现粘性标头的 CSS：

 .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 。 我如何让这些共存？

Answer 1

没有办法共存一个position: sticky在.table-responsive而不重新实现后者。

当肯定不需要响应表时，我的解决方案最终使用.table-responsive-sm来拒绝这种权衡。

Answer 2

没有任何额外的 CSS，您可以通过从 div 中删除 table-responsive 并将 class="bg-white sticky-top border-bottom" 类添加到 table 标签来修复 table head。 像这样

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

Answer 3

在这种情况下，您需要自己编写代码。 以下 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是首选。