Horizontal scroll is not working for header row
Horizontal scroll is not working for header row
I'm using this setup:
$(document).ready(function () {
$('#datatable-schedule').DataTable({
paging: false,
scrollY: 'calc(100vh - 240px)',
scrollCollapse: true,
scrollX: true,
searching: false,
ordering: false,
info: false
});
});
I have a table with 30 columns.
With my test html this table works as expected. It scrolls perfectly vertically and horizontally.
But when I put the table in my larger HTML and I scroll horizontally, the headers stay in place.
Most likely this is because of a conflict with my other css or js files, but I can't find what.
Does anybody have a suggestion what could lead to this unexpected behavior?
Thanks in advance.
Answers
Is it any better with ordering: true?
I'm getting the same. (I know this may not help the OP, apart from confirming they're not alone) I have ordering: true (not set explicitly, just the default).
Neither thead nor tfoot scrolls with the tbody, when the accumulated minimum width of data columns is wider than the window. I guess the horizontal scrollbar should be on the div containing the table, not the tbody (but then again, you don't want the vertical scrollbar to be scrolled of the page either)?
I don't have any other css or js files apart from the cdn links to support the features I've used:
https://cdn.datatables.net/v/dt/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-html5-1.4.2/b-print-1.4.2/datatables.min.css
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js
https://cdn.datatables.net/v/dt/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-html5-1.4.2/b-print-1.4.2/datatables.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js
https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js