Table header misaligned with vertical scroll when display:none

Table header misaligned with vertical scroll when display:none

ScoobysnackScoobysnack Posts: 14Questions: 3Answers: 1

I know questions like this have been asked before, but this one is a little different. I think I've pinpointed the cause but don't know how to fix it.

I have a table within a div which is set to display: none when the page loads. On clicking a button the class is changed and the div containing the table is revealed. All was well until I added a vertical scroll bar. Now the table header and table body are out of alignment. Ie the td cells and th cells don't line up. The table body takes up the 100% width, however the table header is taking the minimum space it needs. This behaviour doesn't happen when the css that hides the div is removed - then the table displays as it should, with header and body alignment.

I understand that the inclusion of the vertical scroll bar generates two separate tables: one for the header and the other for the body. It seems that some calculations are being done to determine the width of the body and header (or columns?) and that by having the table not visible, these calculations can't be done. On page load the width of the hidden <th> s is 0, and this is the width which is set for the visible <th> too. (Though the content makes them larger than 0 wide, in contrast to the hidden <th>s which have no content.)

If this is what's happening, I'm wondering if there's a way to force a refresh when the div is made visible. Or maybe there's another solution(?) Or I've done something wrong...

The code is here: http://jsbin.com/ciweg/4/edit?html,css,js,console,output

(though it's giving an error which it doesn't on the dev site - internal only sorry or I'd give a link to that)

PS I also came across this post (http://www.datatables.net/forums/discussion/23798/header-row-columns-don-t-line-up-when-css-font-size-and-vertical-scrollbars-are-used) and thought that was the problem, but I can find no evidence that DataTables is setting a font size anywhere in the table. (Font size for body is 0.875rem, defined with Foundation).

The only css relating to font I could find in DataTables is in jquery.dataTables.css :
.dataTables_wrapper .dataTables_processing {font-size:1.2em}

This question has an accepted answers - jump to answer

Answers

This discussion has been closed.