I have set of data that should display in JQuery Datatables with options to filter, and scroll without losing column headers. All features work so far but there is problem with the column header. If you click on the link and check run example you will see the problem. The column header is on the left while tbody is centered. I have tried fixing this problem and changing my HTML code, removing some of the JQuery table attributes but still no success. Please if anyone knows how to fix this problem or if there is any problem with my code please elt me know. Here is example:
$('#btnGet').on('click', function() { buildTable(); }); var dataTable; function GenerateTable(tblID) { // Setup - add a text input to each footer cell $('#rptTbl thead tr').clone(true).appendTo('#rptTbl thead'); $('#rptTbl thead tr:eq(1) th').each(function(i) { //var title = $(this).text(); $(this).html('<input type="text" placeholder="Search" />'); $('input', this).on('keyup change', function() { if (dataTable.column(i).search() !== this.value) { dataTable.column(i).search(this.value).draw(); } }); }); dataTable = $('#' + tblID).DataTable({ dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'print', { extend: 'pdfHtml5', orientation: 'landscape', pageSize: 'LEGAL' } ], orderCellsTop: true, fixedHeader: { header: true, footer: true }, scrollX: true, scrollY: "400px", scrollCollapse: true, iDisplayLength: 25, language: { "emptyTable": "No records were found." } }); } function buildTable() { var htmlTbl = '<table id="rptTbl" class="table table-bordered"><thead><tr><th>Area</th></tr></thead><tbody><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr></tbody></table>'; $('#rptData').empty().append(htmlTbl); GenerateTable('rptTbl'); }<!DOCTYPE html> <html> <head> <title>Test JQuery Datatables</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- *** Start: CSS for DataTables. *** --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" /> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" /> <!-- *** End: CSS for DataTables. *** --> <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- *** Start: JS for DataTables. *** --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script> <!-- *** End: JS for DataTables. *** --> </head> <body> <div class="container"> <div id="report_filters" class="collapse in"> <div class="row"> <div class="form-group col-xs-10 col-sm-5 col-md-3 col-lg-3"> <button type="button" id="btnGet" class="btn btn-primary btn-block" data-toggle="collapse" data-target="#report_data,#report_filters">Get Report</button> </div> </div> </div> <div id="report_data" class="collapse"> <div class="row"> <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12"> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#report_data,#report_filters"> <span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back </button> </div> </div> <div id="rptData" class="table-responsive"></div> </div> </div> </body> </html>
scrollX: true, scrollY: "400px", scrollCollapse: true. If you comment they all you will see your table centered. However, i don't found a nice solution to solve the problems these option introduces.<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />that is the JQuery UI one style. Since you are using Bootstrap I think this is more coherent to use:<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" />, nothing more. This same will apply for the replacement of the other sources related to JQueryUI.