Fixed table header WITH dynamic width table?

Question

I've found countless Fixed Header table examples online and as many StackOverflow posts on the subject, but have yet to find one that allows for a dynamic width table that resizes with the browser. Anytime I try to make the width dynamic the thead columns won't align with the tbody columns. Here's a fraction of the samples I've tried:

• Pure CSS version 1
• Pure CSS version 2
• FixedTableHeader (which I can't get to work with jQuery 1.9.1)
• FloatThead

jqGrid and Data Tables seem to work, but I'm trying to build a table using Knockout and would prefer to avoid both - we're actually moving away from jqGrid entirely.

Anyone suggestions?

UPDATE - I stand (or sit) corrected. jQuery.floatThead does support dynamic width tables, and the header columns line up with the body columns on window resize. I guess 50th time's a charm? I just hid the horizontal scrollbar with overflow-x:hidden; and wrapped the table in a div, which is supported by the plugin:

var $table = $('.myTable');
$table.floatThead({
    scrollContainer: function ($table) {
        return $table.closest('.wrapper');
    }
});

Answer 1

The temporary solution was to resize the table multiple times on window resize

$(window).on('resize', function () {
    ResizeFloatThead();
});
ResizeFloatThead = function () {

    var interval = 500;
    for (var i = 0; i < 5; i++) {
        setTimeout(function () {
            $('.myTable').floatThead('reflow');
        }, interval);
        interval -= 100;
    };
};