Fork me on GitHub

Lazy init

floatThead will not fully init until the table has both a thead and a tbody child elements. You need to run $table.floatThead('reflow') once the table has a head and the body and the init will complete.

This table has no thead

This table doesnt have a thead element. Running floatThead on this table will cause it to defer init until:
  1. The table has a thead
  2. AND you run $table.floatThead('reflow')

Click to add a thead and reflow
var $table = $('table');
$table.floatThead();

$('a.add-thead').on('click', function(e){
    $table.prepend('<thead><tr><th>header1</th><th>header2</th><th>header3</th></tr></thead>');
    $table.floatThead('reflow');
    e.preventDefault();
});
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3