scrollX throwing off column headers!

HillChris1234

Okay, I have a table that seems fine when the page first loads (most of the time). But, when you resize it and then maximize it, the whole table is thrown off (see attached). The headers are compressed and pushed to the left, separated from the tbody.

Here is my table:

<table id="tblMailingDetails" class="table table-hover table-striped" style="width:100%">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
    </tbody>
</table>

...and here is my JQuery Constructor:

$('#tblMailingDetails').DataTable({ //Format the company details table
     "scrollX": true,
});

I've narrowed it down to the scrollX part. If I comment that out, it resizes, it's responsive, it's perfect... except that if the browser is more narrow than the grid, it runs off the side (which is why I want a scroll bar).

Also, I'm not sure this matters, but the table is loaded in a Modal via a PartialView in .Net MVC

allan

Can you link to a test case showing the issue please? It sounds like the resize event isn't happen after the window has been maximised.

Allan

HillChris1234

Not really. I'm having a hard time replicating the issue in JSFiddle or anything like that because it's in a Modal that references several pages and this and that. I can keep trying, but I was hoping something obvious would stand out to someone. The behavior is fairly peculiar.

HillChris1234

No, I was wrong. Doing it this way, I lose the scroll bar. I really need someone from the DataTables team to tell me what the magic words are.

allan

We'd need a test case showing the issue to be able to figure out what the magic words would be :-).

Allan