带有粘性标题的响应式引导表 [英] Responsive Bootstrap Table with Sticky Header

问题描述

我有一张桌子.我要添加到标准Bootstrap库中的唯一CSS是实现粘性标头的以下内容:

I have a table. The only CSS I am adding to the standard Bootstrap library is the following to implement the sticky header:

.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中.我如何允许它们共存?

The sticky header worked until I wrapped the table in the div.table-responsive. How do I allow these to co-exist?

推荐答案

在不重新实现后者的情况下，无法将position: sticky共存于.table-responsive中.

There's no way to co-exist a position: sticky inside a .table-responsive without re-implementing the latter.

我的解决方案最终是在肯定不需要响应表时使用.table-responsive-sm拒绝这种折衷方案.

My solution ended up to be using .table-responsive-sm to refuse this trade-off when a responsive table is certainly not needed.

这篇关于带有粘性标题的响应式引导表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！