Responsive Bootstrap Table with Sticky Header

问题

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>

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

回答1:

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

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

来源：https://stackoverflow.com/questions/55483466/responsive-bootstrap-table-with-sticky-header