overflow:auto doesn't work as expected with position:sticky

Question

i have a bootstrap table with the bootstrap class of "table-responsive" as a result is sets overflow-x to auto for the times that the table is too wide for the screen.

i have also set the the th elements to the bootstrap class of "sticky-top" which sets the position of the table th to sticky

as can be seen in this answer of the question Why does overflow:hidden prevent position:sticky from working? this is because when the parent of the sticky element is set to overflow it becomes the scrolling container for the element rather than the window

for now i have set table-responsive to overflow only if it is needed with a media query like so:

.table-responsive{
   overflow-x:inherit;
}

@media (max-width:432px){
   .table-responsive{
      overflow-x:auto;
   }

the issue is now that the table header doesn't stick on mobile screens

Fuseteam · Accepted Answer · 2022-03-30T12:42:01.647

to solve this issue i combined the script from Rik Schennink and Dannie Vinther's approach. in my case i created a copy of the table headers which is called "responsive-header" this "Responsive-header" is set to display:none by default when ever the original header scrolls out of view this responsive header is then made visible

here's a simplified version of what i have HTML

<html>

  <body>
    <main>
      <section>
        <table id="respond" class='table table-responsive sticky-top responsive-header'>
          <thead class="thead-dark">
            <tr>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
            </tr>
          </thead>
        </table>
        <table class='table table-responsive'>


          <thead class="thead-dark">
            <tr>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
          </tbody>
        </table>
      </section>
    </main>
  </body>

</html>

CSS

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.responsive-header {
  display: none;
}

and jQuery

function debounce(func, wait, immediate) {

  var timeout;

  return function() {

    var context = this,
      args = arguments;

    var later = function() {
      timeout = null;

      if (!immediate) func.apply(context, args);

    };

    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);

  };

}

const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
  if (window.scrollY >= 10) $('#respond').removeClass('responsive-header');
  else $('#respond').addClass('responsive-header');
}
document.addEventListener('scroll', debounce(storeScroll), {
  passive: true
});
// Update scroll position for first time                                                                                                                                                    @
storeScroll();

and the jsfiddle:https://jsfiddle.net/uf468ocy/

overflow:auto doesn't work as expected with position:sticky

1 Answers1