Trouble with column header alignment

nerratt

I've been having issues with getting the column headers to properly align with the actual columns. Normally this is fixed after manually sorting a column.

This example has some issues (two search boxes, can't seem to sort) that were introduced when copying the files over and removing sensitive information but the column header alignment issue is present exactly as it is in our normal system.

I have in the past tried removing the non datatables features (jquery tabs, tabletools button) but the alignment is an issue even when only the table is available.

The example can be seen at: http://antechmfg.com/Report.htm The issue is much more prominent on the totals tab.

tangerine

I can't say that this is the solution, but you are using where standards-compliance recommends .
I know DataTables requires - which you have - but I can't remember whether it also requires . Might be worth a shot.

allan

It looks like you might have saved the HTML from a rendered web-page as the DataTables elements are in the raw source. Could you put in the plain source please - just a 'view source' and then copy and paste should do it.

Regarding `td` elements in the `thead` - DataTables does support `td` and `th` elements in `thead` (and in the `tbody` and `tfoot` elements as well) - both cell types in any of the three container elements are technically and semantically valid and correct. It is often a good idea to use `th` in the header to make it clear that it is a header cell, but it isn't required.

Allan

nerratt

I updated that, thanks allan. I'm sure that made it obvious, I'm not typically a web dev and haven't done a lot with Javascript and html in the past.

nerratt

tangerine, I don't think that's the problem but thanks for pointing it out. Will have to fix that!

allan

So to check - its the table on the second tab that you are having misalignment issues with? If so, checkout this example: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

Allan

nerratt

Primarily, yes. I have had some more minor issues with the first tab data in the past but I think that may be mostly resolved. I'll give this a shot! Not really sure how I missed that.

nerratt

Allan,

This did eventually work. Initially I thought there were still some issues but it turns out the show event used in your linked example has been changed to activate (show was deprecated in 1.9 and removed in 1.10)

http://stackoverflow.com/questions/17549339/show-callback-is-not-firing-jquery-ui-tabs

Thought you might want to know this.

allan

Thanks. The 1.10 example has already been updated for this: http://next.datatables.net/examples/api/tabs_and_scrolling.html .

Allan