Column header element is not sized correctly when scrollY is set in the table setup

AaronM

First up, awesome control, it's allowing me to do so much. And the user community is very informative, thank you Allan.

Scenario:
1. The table is created with scrollY set in the options.
2. The table's content is enough to force vertical scrolling.
3. The table is populated on a hidden or non visible element.

Result: The header doesn't adjust it's width correctly. This results in the column headers bunched up to the left. Clicking in the header region (on the column headers) immediately fixes the problem.

The html generated looks like this:

<table class="display dataTable no-footer" width="100%" role="grid" style="margin-left: 0px; width: 100px;">

Note the width is 100px. Using Chrome dev tools and unchecking the width style for this element and the parent dataTables_scrollHeadInner element and inheriting the parent table.dataTable width:100% is allowed to take effect also solves the problem.

There are a couple of places in the jquery.dataTables.js source where width is set to 100 and I'm wondering if it's assuming pixels when it should be 100%?

I have created a JsFiddle that demonstrates this issue, http://jsfiddle.net/AaronMorganNZ/cvszxcw5/5/.

AaronM

I've found a work around. If the following code is executed after the table is made visible the column headers are aligned correctly;

$('#example').DataTable().columns.adjust().draw();