ScrollX not applying horizontal scroll on mobile

jRad

Link to CodePen.

What I'm trying to do is to add a horizontal scrollbar to the DataTables plugin on my site when on mobile.

I've added the CSS and adjusted the jQuery code to try and to this as per the docs:

CSS

div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
}

JS

$(document).ready(function () {
  $("#used-equip-table").DataTable({
    pageLength: 50,
    "scrollX": true
  });
});

When I shrink the browser to a mobile viewport, it looks like it works perfectly. It adds the horizontal scrollbar, and the user on mobile can swipe through:

However if you open my codepen in the browser, it doesn't do that. Instead, it does this:

It looks completely different, and doesn't have the horizontal bar.

allan

It looks like you've got some kind of stacking CSS on the table. However, I wasn't able to get it running due to errors shown in the browser's console:

Refused to apply style from 'https://cdpn.io/jdfill/fullpage/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
app.js:1 Failed to load resource: the server responded with a status of 404 ()
everypage-6d5a7f003504813cbca5.js:1 Uncaught TypeError: Cannot read property 'body' of null

That was Chrome. Firefox as a similar issue. Does it run for you? What browser are you using?

Allan