Horizontal Scroll dataTables.js

Question

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

w00ngy · Accepted Answer · 2014-10-28 17:20:11Z

15

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

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

edited Oct 28, 2014 at 17:20

w00ngy

1,84825 silver badges27 bronze badges

answered Jul 14, 2014 at 4:31

Ryan Salmons

1,46910 gold badges23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anoop LL Over a year ago

whats the difference between scrollx and sscrollx?

Edmund Gentle Over a year ago

I also found adding responsive:false did the trick for me. I am using ASP Net Zero, which also adds a dt-responsive class to the table, which should be removed.

Peter Mortensen · Accepted Answer · 2023-02-03 23:42:21Z

9

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.

edited Feb 3, 2023 at 23:42

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 1, 2016 at 20:08

Ramraj Patel

1932 silver badges9 bronze badges

1 Comment

user4318530 Over a year ago

for me changing the "sScrollXInner" to "100" worked for responsive show down.

davidkonrad · Accepted Answer · 2014-07-13 09:31:18Z

7

Try putting this into CSS:

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

edited Jul 13, 2014 at 9:31

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

answered Jul 12, 2014 at 22:53

magma

2993 silver badges6 bronze badges

2 Comments

MSTdev Over a year ago

Really working well. I also applied "sScrollX": '100%' in datatable application but width issue occur for header.

Dazzle Over a year ago

Nice, this works well. Thanks

Peter Mortensen · Accepted Answer · 2023-02-03 23:44:03Z

0

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.

edited Feb 3, 2023 at 23:44

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 1, 2022 at 7:04

Sagiria

11 bronze badge

1 Comment

Peter Mortensen Over a year ago

Re "you can set the sScrollX parameter your container wrapper's width to be": This is partly incomprehensible. Are you using machine translation? Can you fix it?

Prashant Pokhriyal · Accepted Answer · 2017-10-04 05:01:32Z

-1

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

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

edited Oct 4, 2017 at 5:01

Prashant Pokhriyal

3,8474 gold badges33 silver badges42 bronze badges

answered Jun 20, 2016 at 13:03

Manpreet

571 silver badge3 bronze badges

Collectives™ on Stack Overflow

Horizontal Scroll dataTables.js

5 Answers 5

2 Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related