Горизонтальная прокрутка dataTables.js

Question

У меня возникают проблемы с получением горизонтальной прокрутки для работы с dataTables.js. Ожидаемый результат - таблица, которая позволяет мне прокручивать по горизонтали внутри таблицы. Текущий результат - таблица, которая выходит за пределы контейнера div. Какие-либо решения?

HTML:

<div class="box-body table-responsive">
     <table id="portal-drivers" class="table table-bordered table-striped" cellspacing="0" width="100%">
         <thead>
             <tr>
                 <th>First Name</th>
                 <th>Last Name</th>
                 <th>Email</th>
                 <th>Number</th>
                 <th>Rating</th>
                 <th>Transactions</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>Bugs</td>
                 <td>Bunny</td>
                 <td>[e-mail]</td>
                 <td>[phone]</td>
                 <td>4.8</td>
                 <td>309239045293459823945234895</td>
             </tr>
          </tbody>                   
     </table>

CSS:

.table-striped > tbody > tr:nth-child(odd) > td, 
.table-striped > tbody > tr:nth-child(odd) > th {
  white-space: nowrap;
}
#portal-drivers {
  overflow: auto;
}

JQuery

$("#portal-drivers").dataTable( {
    "scrollX": true
} );

Answer 1

Измените scrollX на sScrollX: 100%

$("#portal-drivers").dataTable( {
    "sScrollX": '100%'
} );

Answer 2

Чтобы сделать прокручиваемую таблицу с возможностью прокрутки данных (заголовок и тело), используйте свойство sScrollXInner вместе с sScrollX следующим образом:

$("#my-demo-datable").dataTable( {
    "sScrollX": "100%",
    "sScrollXInner": "110%",
} );

Answer 3

Попробуйте вставить это в CSS:

#portal-drivers {
    overflow-x: scroll;
    max-width: 40%;
    display: block;
    white-space: nowrap;
}

Answer 4

Я попробовал это, и это сработало для меня,

      $(document).ready(function() {
    $('#example').dataTable( {
        "sScrollX": "100%",
        "sScrollXInner": "110%",
        "bScrollCollapse": true
    } );
} );

Чтобы включить прокрутку x, вы можете установить параметр sScrollX в ширину контейнера-оболочки. Также здесь используется sScrollXInner, чтобы заставить таблицу быть шире, чем это необходимо.

Answer 5

Для того, чтобы сделать возможность прокрутки данных, вы можете попробовать это

$(document).ready(function() {
    $('#example').DataTable( {
        *"scrollY": 200,
        "scrollX": true
    } );
} )