Horizontal scrolling dataTables.js

Question

I find it difficult to get horizontal scrolling to work with dataTables.js. The expected result is a table that allows me to scroll horizontally inside the table. The current result is a table that extends beyond the container div. Any solutions?

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

Change "scrollX" to "sScrollX": "100%"

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

Answer 2

Try putting this in CSS:

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

Answer 3

To make a scrollable scrollable (header and body both) , use the sScrollXInner property along with sScrollX as follows:

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

Answer 4

To create scrollable data, you can try this

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