Table header misaligned with vertical scroll when display:none

Scoobysnack

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)

• http://debug.datatables.net/iyokaz - page load - the table is hidden, within a div which is set to display: none
• http://debug.datatables.net/ujanur - after clicking on the button to remove the class which hides the div containing the table. Table is visible and table header is misaligned to table body
• http://debug.datatables.net/asaduk - after clicking to sort any column, th (header) and td (body) cells are now aligned

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}

Scoobysnack

So in searching for something to get the table to redraw, I came across this: http://datatables.net/reference/api/columns.adjust() which recalculates the column widths, and explains that when content is in tabs and hidden divs the sizes can't be calculated, therefore it's necessary to use this method.

I needed to bind this to the button which, when clicked on shows and hides the div containing the table.

The solution I found was to bind this to the toggleclass method ( http://stackoverflow.com/questions/10321393/jquery-function-on-toggleclass-complete), noting:

The .toggleClass method along with all other animation methods return a deferred object that you can access using .promise(). At that point, you can bind to it's done method.

$(function() {
    $('#buttonName').click(function() {
    var tableA = $('#tableName').DataTable();
    $('#DivOrTabWithHiddenTable').toggleClass('hideMe', 1000).promise().done(function(){
            tableA.columns.adjust().draw();
    });
    });
});

(hideMe is the name of a class applied to the #DivOrTabWithHiddenTable, and css is set to display: none)

This is probably not very pretty, and I think it would be better if the redraw was only being called when class hideMe was removed, but it does the job and might be helpful to others.

Scoobysnack

Doesn't seem to be a way for me to set this question as answered... even though I answered it myself :)

allan

I must look into that so you can mark your own questions answered. I've just done it .

Good to hear you found the solution.

Allan

holdencreative

I've put a post on making scroll-x and scroll-y work in a responsive context here: https://datatables.net/forums/discussion/26578/solution-scrollable-vertical-and-horizontal-responsive-datatables-via-flexbox#latest

Example code here: http://codepen.io/holdencreative/pen/ZYqoMg

• Hope it is helpful!