Sticky Table Header on Bootstrap Responsive Table

I am trying to create a sticky table header. Using this CSS code it works perfectly on a standard table (it will remain sticky all the way to the bottom of the table.

th {
  background: white;
  position: sticky;
  top: 0;
}

However I need the table to be responsive for mobile devices (ability to scroll right). Unfortunately, it no longer works when I add the bootstrap table-responsive class (please see my https://jsfiddle.net/b8x16eht/)

How can I get it to function on both mobile and desktop (without setting fixed heights)

EDIT: Thanks to @UfguFugullu for pointing out another possible solution which is an improvement. It works well for desktop however it still does not work in responsive mode (when viewing from a smaller window). Updated fiddle here: https://jsfiddle.net/aqfjozrm/

.table-sticky th {
  background: #fff;
  position: sticky;
  top: -1px;
  z-index: 990;
}

I managed to find a website which has gotten it to work on responsive tables as well as full width although it is not using bootstrap https://www.timeanddate.com/weather/new-zealand/auckland/hourly

I am starting to think that we need to add a javascript listener to offset the thead position from the body then update the top position style of the thead. Any js gurus here :)?