misaligned table heads to rows

Carpathea

This issue is mentioned a lot but i can't find an issue with a similar enough set up to mine so here goes
as you can see from the image the column headers are massively out of alignment with the empty boxes (they contained sensitive data so were erased)
This table has 80 odd columns so im using

        $('#paginationMax').DataTable({
            "scrollX": true,
            "bFilter": false
        });

The difference is, this table is part of a repeater to populate it with data

 <asp:Repeater runat="server" ID="repeater">
   <HeaderTemplate>
         <table cellspacing="0" class="cell-border pagination-table-max" id="paginationMax">
                 <thead>
                        <tr>
                         ...tonne of columns here....   
                        </tr>
                    </thead>
                     <tbody>
 </HeaderTemplate>
 <ItemTemplate>
        <tr>
           ....evalation of a tonne of columns here.....
         </tr>
  </ItemTemplate>
 <FooterTemplate>
                       </tbody>
        </table>
  </FooterTemplate>
</asp:Repeater>

i tried the fixes using white-space nowrap and various other css fixes. None have worked sadly, can anyone help me out here?
Many thanks

tangerine

I don't know asp "repeater", but if it's a simple loop then you're giving your DataTable multiple tbody tags. DT will only accept one.

Carpathea

There is only 1 tbody the repeater doesn't affect the html at all. There is a smaller table that's a minified version of this with less columns therefore not requiring the xscroll that is built in the same way and works beautifully

tangerine

Ah, okay. Sorry I can't be more help.

Carpathea

No problem bud thanks for the suggestion

Rob Brun

Hi Carpathea maybe

var dataTable = $('#paginationMax').DataTable({
    "scrollX": true,
    "bFilter": false
});

dataTable.on('draw.dt', function () {
     $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
});

Allen said there is an updated version of $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();, but it works for me.

Shay

allan

It looks like the issue is with a table inside a table. As Shay says you need to call columns.adjust(), although its a little more efficient and accurate to call it when the table is made active rather than on draw.

See this example for details.

Allan