Отзывчивый 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. Как я могу позволить им сосуществовать?

Answer 1

Нет способа сосуществовать position: sticky внутри .table-responsive без повторной реализации последнего.

Мое решение закончилось тем, что я использовал .table-responsive-sm, чтобы отказаться от этого компромисса, когдаотзывчивый столик конечно не нужен.