CODEWITHSUNDEEP
datatablesdatatables-1.10zurb-foundation-5
Julie S.
Julie S.

Reputation: 127

Why does data-table table last header not align with last column?

I created a table with DataTable library (that is using foundation-zurb 5.5.3), Per the below image I'm seeing both in Chrome as in IE 11 that the most right column header the most right column header does not align with the other rows when you first open up the page. The actual webpage is http://iprobesolutions.com/learn/wireless-conference-system-comparison. However if I open devtools to try and inspect the code the issue dissappears! When I refresh with CTRL+ F5 it however reappears.

The issue does not appear when I create this fiddle: http://jsfiddle.net/setbon/x75o53ck/

Below is just a small part of the code pasted. I'd really appreciate if you could look at the webpage since this is where the issue is displayed...perhaps a bug in IE and Chrome ?

<table id="example" class="display nowrap table1 compact">

Upvotes: 0

Views: 1388

Answers (2)

K Thorngren
K Thorngren

Reputation: 548

I see you are loading the Datatables FixedHeader code. I don't see how or if you are using it but its not compatible with scrollX and scrollY: https://datatables.net/extensions/fixedheader/

Try removing either FixHeader or the scrolling options.

Upvotes: 1

Gyrocode.com
Gyrocode.com

Reputation: 58860

Usually these type of issues occur when table is hidden when initialized and then becomes visible in a tab, modal dialog, etc.

In most cases the solution is to call columns.adjust() to recalculate column widths once table becomes visible.

table.columns.adjust();

When I ran the code above after your table is initialized, the issue disappears.

I cannot explain why this issue occurs with your table. I'm not familiar with Foundation framework, but I don't think you have to call foundation() when initializing the table.

See jQuery DataTables: Column width issues with Bootstrap tabs for more information, examples and details.

Upvotes: 0

Related Questions