jQuery reflow table inside collapsible-set not responsive

Question

I am very new to jQuery, if this had been asked many time please point me to the right direction. I am trying to put a reflow table inside the a collapsible div.

   $.each(info, function (i, area) {
    // Clone block
    var item_area_block = area_block.cloneNode(false);
    var item_area_title = area_title.cloneNode(false);
    var item_area_display =  area_display.cloneNode(false);
    var item_area_table = area_table.cloneNode(false);
    var item_area_table_body = area_table_body.cloneNode(false);

    // Create title
    item_area_title.innerHTML = area.area_name;

    // Create table content
    item_area_table.setAttribute("id", "category_table_"+i);
    $.each(area.sport_category, function (cat_number, category) {
        var table_tr = area_table_tr.cloneNode(false);
        var table_th = document.createElement('th');

        table_th.innerHTML = category.sport_name;
        table_tr.appendChild(table_th);
        $.each(category.events, function (i, date) {
             var table_date_td = area_table_td.cloneNode(false);
             table_date_td.innerHTML = date.url;
             table_tr.appendChild(table_date_td);
        });


        item_area_table_body.appendChild(table_tr);
    });

    // Thread
    var item_area_table_thread = document.createElement('thead');
    var thread_table_tr = area_table_tr.cloneNode(false);
    var thread_table_th = document.createElement('th');
    var thread_table_th2 = document.createElement('th');
    thread_table_th.innerHTML = "test";
    thread_table_th2.innerHTML = "test2";
    thread_table_tr.appendChild(thread_table_th);
    thread_table_tr.appendChild(thread_table_th2);
    item_area_table_thread.appendChild(thread_table_tr);
    item_area_table.appendChild(item_area_table_thread);

    item_area_table.appendChild(item_area_table_body);
    <!-- $("#category_table_"+i).table("refresh"); -->
    <!-- item_area_display.appendChild(item_area_table); -->

    // Add content block to container
    item_area_block.appendChild(item_area_title); // Title
    item_area_block.appendChild(item_area_table); // Content
    container.appendChild(item_area_block);

});

//Reflesh
$("#area_table").promise().done(function () {
    $(this).find('div[data-role=collapsible]').collapsible({
        refresh: true
    });
});
$('info-page').trigger('pagecreate');
});

A working JSFiddle example and here is my failed example.

If I copy the table's html code to another page, it seem to work fine. I also try the solution from this question

Answer 1

I think you just need to initialize the jQM table widget as well as refreshing the collapsible:

$("#area_table").promise().done(function () {
    $(this).find('div[data-role=collapsible]').collapsible({
        refresh: true
    });
    $(this).find('table').table();
});

Updated FIDDLE