Header Alignment mismatch with scrollX = true

alzambo

Hi,
I have a column headers misalignment issue, appearing when enabling scrollX.
See Image

This is HTML:

<table id="tabellaDati" class="table table-bordered table-hover" >
    <thead>
    <tr>
        <th>Azioni</th>
        <th class="stato">&nbsp;</th>
        <th class="stato">&nbsp;</th>
        <th>Protocollo</th>
        <th>Data Incarico</th>
        <th>Assicurato</th>
        <th>Sinistro</th>
        <th>Evento</th>
        <th>Compagnia</th>
        <th>Data Sinistro</th>
        <th>Data Sopralluogo</th>
        <th>Stato Pratica</th>
        <th>Incaricato</th>
        <th>Data Scadenza</th>
        <th>Casa</th>
        <th>GG</th>
    </tr>
    </thead>
</table>

This is JS:

"lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "Tutti"] ],
"stateSave": true,
"autoWidth": false,
 "scrollX": "100%",

Is it a known issue or maybe something wrong with my css?
Thank you

allan

I would suggest you keep autoWidth enabled. Also check that you are using the latest version of DataTables.

Failing that, please link to a page showing the issue.

Allan

alzambo

Hi Allan,
no luck autoWidth enabled.
I've also checked DT version and it's 1.10.11.

This is the page

allan

You have the following in your CSS - could you remove it please:

div.dataTables_scrollBody table {
    table-layout: fixed;
    width: 98% !important;
}

Allan

alzambo

Ok, i've commented it out...
but the problem remains...

alzambo

...up...

allan

Could you also add width="100%" as an attribute to your HTML table please?

Allan

alzambo

Ok, done.
Same problem...

jr42.gordon

Try the options I gave in my answer to the question in this thread https://datatables.net/forums/discussion/comment/88457/#Comment_88457 .

Allan has already had you do some of these.

alzambo

@jr42.gordon
Tried everyting in your post but without luck!

Thank you..

allan

"autoWidth": false,

Can you remove that please.

Allan