Table body misaligned with Table header until Sort is clicked

edimusrex

I am read through various forums where people seem to be experiencing a similar issue. When my table first initializes the body is no where near being aligned with the table header UNTIL I click on sort in which case everything lines up beautifully. Here is how I initialize my table:

$(document).ready(function(){
                    $("#watermark").dataTable({
                        scrollY: '500px',
                        scrollX: true,
                        scrollCollapse: false,
                        paging: false,
                        "columns": [
                            { "visible": false },
                            { "bSortable": false },
                            null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null
                        ]
                    }).yadcf([
                            {column_number: 2, data: ['Found', 'Not Found'], filter_match_mode: "exact", filter_default_label: "Found/Not Found"},
                            {column_number: 3, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
                            {column_number: 4, data: ["Yes", "No" ,"N/A"], filter_default_label: "Select Yes/No"},
                            {column_number: 5, data: ["Yes", "No" ,"N/A"], filter_default_label: "Select Yes/No"},
                            {column_number: 11},
                            {column_number: 14}
                    ]);
                    $("#versions").dataTable({
                    scrollY: '55vh',
                        scrollX: true,
                        scrollCollapse: false,
                        paging: false,
                    });
                });

And the table like so

        <iframe id="myFrame" style="display:none"></iframe>
        <div style="width:100%">
        <table id="watermark" class="display nowrap" border="1">
        <thead>

I am using PHP to query and load the table but that doesn't seem to be causing any issues as the data and sorting is correct.

Any help would be greatly appreciated, this is driving me crazy

edimusrex

Adding

style="table-layout:fixed"

Aligns the headers with the rows but if a cell has data that is longer that the size of the header is bleeds into the adjacent rows so this is obviously not a solution