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

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


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.