How to fix header not scrolling with body in datatables table

Question

When scrollx is enabled the header doesn't scroll with the table body.

https://jsfiddle.net/gm90arph

I tried using fixedHeader:true with no success.

I expected the header to scroll horizontally with the table body.

Edit: I want to use the Scroller extension so I don't have any pagination.

Answer 1

I tried reproduce your case, it work normally.

 $(document).ready(function() { $('#example').DataTable({ scrollY: 300, scrollX: true, scroller: true }); } ); 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <div class="card"> <div class="card-body"> <table id="example" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Header5</th> <th>Header6</th> <th>Header7</th> </tr> </thead> <tbody> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr><tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Header5</th> <th>Header6</th> <th>Header7</th> </tr> </tfoot> </table> </div> </div> 

Answer 2

I think you have added more unused JS files which is being conflicted with other js

Have a look with this sample

  $(document).ready(function() { $('#example').DataTable( { fixedHeader: { header: true, footer: true }, paging: false, scrollY: 300, scrollX: true, scroller: true, bInfo : false, searching : false } ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script> <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css" rel="stylesheet"/> <div class="card"> <div class="card-body"> <table id="example" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> </tr> </thead> <tbody> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> </tr> </tfoot> </table> </div> </div> 

Answer 3

I have changed your jsFiddle to make it work the way you want it. The header will now scroll with data as needed. Please check https://jsfiddle.net/toczbega/1/

 $(document).ready(function() { $('#example').DataTable({pageLength:25, scrollX: true}); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <table id="example" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Header5</th> <th>Header6</th> <th>Header7</th> </tr> </thead> <tbody> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr><tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Header5</th> <th>Header6</th> <th>Header7</th> </tr> </tfoot> </table> 

Answer 4

I found the solution after taking a break and looking at my code.

It was because of a small typo. I typed scrollx: true instead of scrollX: true

Now everything works as expected

https://jsfiddle.net/dg3kcyuf/2/

 $(document).ready(function() {
    $('#example').DataTable({
        scrollY: 300,
        scrollX: true,
        scroller: true
    });
} );