Horizontal Scroll dataTables.js
33,964
Solution 1
Change "scrollX" to "sScrollX": '100%'
$("#portal-drivers").dataTable( {
"sScrollX": '100%'
} );
Solution 2
In order to make datatable scrollable (header and body both), use property sScrollXInner
along with sScrollX
as following:
$("#my-demo-datable").dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
} );
Setting sScrollXInner to 100% will allow the table to be responsive and show the scroll bar only when the table overflows. At 110%, it will always be overflowing.
Solution 3
Try putting this into CSS:
#portal-drivers {
overflow-x: scroll;
max-width: 40%;
display: block;
white-space: nowrap;
}
Author by
Ryan Salmons
Updated on August 12, 2021Comments
-
Ryan Salmons almost 3 years
I am having difficulty getting the horizontal scroll to work with dataTables.js. The expected result is a table that allows me to scroll horizontally within the table. The current result is a table that extends outside of 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>[email protected]</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 } );
-
MSTdev almost 9 yearsReally working well. I also applied "sScrollX": '100%' in datatable application but width issue occur for header.
-
Admin over 6 yearsfor me changing the "sScrollXInner" to "100" worked for responsive show down.
-
Anoop LL about 5 yearswhats the difference between scrollx and sscrollx?
-
Edmund Gentle over 4 yearsI also found adding
responsive:false
did the trick for me. I am using ASP Net Zero, which also adds adt-responsive
class to the table, which should be removed.