misaligned table heads to rows
misaligned table heads to rows
Carpathea
Posts: 3Questions: 1Answers: 0
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
This discussion has been closed.
Answers
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.
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
Ah, okay. Sorry I can't be more help.
No problem bud thanks for the suggestion
Hi Carpathea maybe
Allen said there is an updated version of $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();, but it works for me.
Shay
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