title: Sticky Table Header on Bootstrap Responsive Table
body: <p>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.</p>
  
  <pre><code>th {
    background: white;
    position: sticky;
    top: 0;
  }
  </code></pre>
  
  <p>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 <a href="https://jsfiddle.net/b8x16eht/" rel="nofollow noreferrer">https://jsfiddle.net/b8x16eht/</a>)</p>
  
  <p>How can I get it to function on both mobile and desktop (without setting fixed heights)</p>
  
  <p>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: <a href="https://jsfiddle.net/aqfjozrm/" rel="nofollow noreferrer">https://jsfiddle.net/aqfjozrm/</a></p>
  
  <pre><code>.table-sticky th {
    background: #fff;
    position: sticky;
    top: -1px;
    z-index: 990;
  }
  </code></pre>
  
  <p>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 <a href="https://www.timeanddate.com/weather/new-zealand/auckland/hourly" rel="nofollow noreferrer">https://www.timeanddate.com/weather/new-zealand/auckland/hourly</a></p>
  
  <p>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 :)?</p>