Recreate table TDs depending of parent width

HTML

<table class="initial" border="1">
        <tr>
            <td>test 1</td>
            <td>test 2</td>
            <td>test 3</td>
        </tr>
        <tr>
            <td>test 4</td>
            <td>test 5</td>
            <td>test 6</td>
        </tr>
        <tr>
            <td>test 7</td>
            <td>test 8</td>
            <td>test 9</td>
        </tr>
        <tr>
            <td>test 10</td>
            <td>test 11</td>
            <td>test 12</td>
        </tr>
        <tr>
            <td>test 13</td>
            <td>test 14</td>
            <td>test 15</td>
        </tr>
</table><br /><br />

<div id="tableContainer">
    <table class="destroy" border="1">
        <tr>
            <td>test 1</td>
            <td>test 2</td>
            <td>test 3</td>
        </tr>
        <tr>
            <td>test 4</td>
            <td>test 5</td>
            <td>test 6</td>
        </tr>
        <tr>
            <td>test 7</td>
            <td>test 8</td>
            <td>test 9</td>
        </tr>
        <tr>
            <td>test 10</td>
            <td>test 11</td>
            <td>test 12</td>
        </tr>
        <tr>
            <td>test 13</td>
            <td>test 14</td>
            <td>test 15</td>
        </tr>
    </table>
</div>

CSS

#tableContainer {
    background: #e5e5e5;
    border: 1px solid gray;
    overflow: hidden;
    position: relative;
    padding: 10px;
}
table.initial {
    background: #ffffff;    
}
table {
    width: 100%;
    background: #EFEFEF;
}

td {
    border: 1px solid #ADADAD;
    padding: 5px;
    width: 200px;
    display: block;
    float: left;
}

JavaScript

window.onresize = function() {
    customizeTables()
};

function customizeTables() {
    // new table
    var nt = new Array();
    // current table tds
    var elements = new Object();
    // table parent width
    var wrap = $('table').parent().width();
    // current generated width
    var ct = 0;
    var fw = 0;
    // col of new table
    var col = new Array();

    $('table.destroy td').each(function(index, ob) {

        fw = $(ob).width() + 2; //borders
        fw += parseFloat($(ob).css('padding-left').replace("px", ""));
        fw += parseFloat($(ob).css('padding-right').replace("px", ""));
        fw += parseFloat($(ob).css('margin-left').replace("px", ""));
        fw += parseFloat($(ob).css('margin-right').replace("px", ""));

        if ((ct + fw) <= wrap) {

            ct += fw;
        } else {

            nt.push(col);
            ct = fw;
            col = [];
        }

        col.push(ob);
        // all elements (all tds)
        elements[index] = ob;
    });
    nt.push(col);

    var $table = $('<table class="destroy" border="1">');
    var row = '';

    $.each(nt, function(row, cols) {

        var row = '<tr>';

        for (i in cols) {
            row += '<td>' + $(cols[i]).html() + '</td>';
        }

        $table.append(row + '</tr>');

    });

    $table.append('</table>');
    $('#tableContainer').empty();
    $table.appendTo('#tableContainer');
}
customizeTables();