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/.