fixedHeader and scrollX

I have seen many posts saying scrollX and fixedHeader do not play well together. However, I have seen a few examples (such as Horizontal page scrolling) where they do work as desired, the header will scroll horizontally with the table. I have made numerous attempts to duplicate the action in my own tables, with no luck.

This is what I have:

$(document).ready(function() {
    $('#table').DataTable({
        "order": [[3, "desc" ]],
        searching: false,
        paging: false,
        fixedHeader: {
            header: true,
            headerOffset: 45,
            },
        scrollX: true
    });
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>

What am I overlooking?