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.