CODEWITHSUNDEEP
htmljquerycssdatatables
Ryan Salmons
Ryan Salmons

Reputation: 1459

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>[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
});

Upvotes: 8

Views: 45690

Answers (5)

Sagiria
Sagiria

Reputation: 1

I tried this and it worked for me,

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

To enable x scrolling, you can set the sScrollX parameter your container wrapper's width to be. Also the sScrollXInner is used here to force the table to be wider than is strictly needed.

Upvotes: 0

Ramraj Patel
Ramraj Patel

Reputation: 193

In order to make the datatable scrollable (header and body both), use property sScrollXInner along with sScrollX as follows:

$("#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.

Upvotes: 9

Manpreet
Manpreet

Reputation: 57

For making datatable scroll-able ,you can try out this

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

Upvotes: -1

Ryan Salmons
Ryan Salmons

Reputation: 1459

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

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

Upvotes: 15

magma
magma

Reputation: 299

Try putting this into CSS:

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

Upvotes: 7

Related Questions