Question

我有一张桌子。我要添加到标准Bootstrap库中的唯一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>

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

2 个答案: