Horzontal Scroll not working like the example.

Link to test case:
Image of the problem
Sadly the upload image, file etc. don't seem to work.

Description of problem:

script(type="text/javascript").
    $(document).ready( function () {
        var options = {
            scrollHorizontal: true,
            uniqueFilterText: true,
            selectColumns: [1,3,4,5,6,7,8,15,16,17,18,19],
            responsive: false,
        }
        tableFormatter('#viewuserTable', options);
    });

This is my JavaScript, it works nicely, however, scrollHorizontal won't work. I did exactly as the example in basic said.

My HTML (pug):

div#testid(style="width:100%;max-width:100%;")
        table#viewuserTable.display.nowrap(style="width:100%;")
            thead
                tr
                    th ID:
                    th Gebruiker: 
                    th Level: 
            tbody
                for test in data
                    tr
                        td= test.id
                        td= test.name
                        td= test.level
            tfoot
                tr
                    th ID:
                    th Gebruiker: 
                    th Level: 

And here my CSS:

#testid .dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}

#testid th, #testid td { white-space: nowrap; }

To keep it more clean, I only show you how 3 columns are made, but it's actually 20~. What Did I do wrong?