DataTables не применяют горизонтальную полосу прокрутки или стили на мобильном

Question

Ссылка на CodePen .

Я пытаюсь добавить горизонтальную полосу прокрутки к плагину DataTables на моем сайте в мобильном режиме.

I Мы добавили CSS и скорректировали код jQuery, чтобы попытаться использовать его как для документов :

CSS

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

JS

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

Когда я сжимаю браузер в мобильном окне просмотра, похоже, он работает отлично. Он добавляет горизонтальную полосу прокрутки, и пользователь на мобильном телефоне может пролистывать:

Однако, если вы откроете мой код в браузере, он не сделай это. Вместо этого он делает это:

Он выглядит совершенно иначе и не имеет горизонтальной полосы.

Как я могу добиться того же вида, что и на первой картинке?