Horizontal Scroll dataTables.js

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. Is there a solution? 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 }); ```