Header Row columns don't line up when CSS * font-size and vertical scrollbars are used

swells

Hello! This is a copy of the post in Community Support (http://datatables.net/forums/discussion/23794/header-row-columns-don-t-line-up-when-css-font-size-and-vertical-scrollbars-are-used#latest). We wanted priority support on this, so I moved it here.

First, I am really impressed with v1.10. It is much more intuitive to use. So, thanks!

It seems that when I create a table with vertical scroll bars, the header row columns don't line up. I traced the issue to our CSS code, that has:

* {
    font-size: 16px;
}

If I remove the font-size line, the headers line up, but it messes up the text of the rest of our site. If I remove the vertical scroll bars, the headers also line up, but we want to use them.

Here is the link to the JS Bin output: http://live.datatables.net/lavoqaji/1/ And the link to the source: http://live.datatables.net/lavoqaji/1/edit?html,css,js,output

Any help would be appreciated.

Thanks!

-Scott

allan

Hi Scott,

Thanks for picking up the DataTables support option! This is an great little problem, and thank you so much for the test case illustrating it.

The reason I say "great" is that it is an interesting trip down through how CSS selector priorities work and also the DataTables layout when scrolling is enabled.

When you enable scrolling, DataTables splits the table into two or three individual tables (two if no footer, three if there is), so that the body can scroll independently of the header (and footer). Javascript is then used to align the columns by setting the width to be identical between all tables.

The issue you are running into here is that DataTables has a "helper" second, hidden header, in the body table which make the column alignment possible. The hidden header contains the content of the actual header, with each cell wrapped in a div so that the height can be set to 0 (can't reliably do it with just an HTML table cell).

This is where the CSS selector priority comes in. You have .datatable th to set the font size in the header - but because DataTables has that extra div that wraps the hidden content the * selector comes back into play. The result is that the hidden header, which is there specifically for sizing, is a different size from the visible header!

So to fix, you could use:

.datatable th div.dataTables_sizing {
    font-size: 12px; 
}

I've updated your example with that here: http://live.datatables.net/lavoqaji/3/edit .

Is there a better way? Probably! But I can't think of it at the moment. That extra element, combined with the way CSS inheritance works, and the * selector is a nice little mix...

I think that work around is possibly the best option at the moment. Let me know how you get on with it!

Regards,
Allan

swells

That seemed to work perfectly! Thanks! I would never have come up with that solution on my own. I'll play around with it some more and if I run into any more issues, I'll let you know.

Much appreciated, Allan!

-Scott

allan

No problem - great to hear that helped!

Allan