Horizontal Scroll dataTables.js

Question

Ho difficoltà a far funzionare lo scroll orizzontale con dataTables.js. Il risultato atteso è una tabella che mi consente di scorrere orizzontalmente all'interno del tavolo. Il risultato corrente è una tabella che si estende al di fuori del div contenitore. Qualche soluzione?

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>bugs@tunesquad.com</td> 
       <td>(310) 530-6789</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

Change "scrollX" a "sScrollX": '100%'

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

Answer 2

Prova a mettere questo in CSS:

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

Answer 3

Per rendere datatable scorrevole (intestazione e corpo entrambi), utilizzare la proprietà sScrollXInner insieme sScrollX come segue:

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

Answer 4

Per rendere DataTable scorrimento-in grado, si può provare questo

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