动态表：根据可用宽度更改行数

Question

我需要使用页面重新调整大小来创建一组浮动的左表。 代替：

我希望这种情况发生： 一般结构如下：

<div id="wrapper">
    <table>
        <tbody>
            <tr title="Static title">
                <td class="indicator">Static text</td>
                <td class="val">Text retrieved from ajax call</td>
            </tr>
            ...<tr>...</tr>
        </tbody>
    <table>
    ...<table>...</table>
</div>

也就是说，我有多个表，每个表包含多行。我的css确保每个表都是其最宽行的宽度：

table, td.indicator {float: left;}
td {display: inline-block;}
td.val{
   float: right;
   padding-left: 5px;
   font-weight: bold;
}

我还有一个生成这个html的javascript / jQuery函数：

function genFundamentalsHTML(rows){
    s = '<table><tbody>';               
    $.each(d.indicators, function(index, value) {
        s += '<tr title="' + value.title + '">';
        if ((index+1)<= rows){
            s += '<td class="indicator firstInd">' + value.name + '</td>';
        } else {
            s += '<td class="indicator">' + value.name + '</td>';   
        }
        s += '<td class="val">' + value.val + '</td>';
        s += '</tr>';
        if ((index+1)% rows == 0){
            s += '</tbody></table><table><tbody>';
        } 
    });                 
    s += '</tbody></table><div class="clear"></div>';                   
    $('#wrapper').html(s);
}

我有另一个函数来计算并将正确的左边距填充到所有td.indicator元素，以便表格始终填充包装器的整个宽度。我的问题是，当你减小屏幕宽度时，由于表格向左浮动，当它们的组合宽度大于包装器的宽度时，末端的宽度会跳到下面，布局会立即变得不均匀。相反，当达到td.indicator元素上的某个填充阈值时，比如5px，我想增加每个表的行数。事实上，我已经实现了这一点，但只是在页面刷新时，只需硬编码一些if语句检查包装器宽度并使用硬编码参数7,9,12等调用genFundamentalsHTML（行）。我试图修改我的填充功能，以便它根据填充宽度重新生成表格html，但这不会导致页面崩溃/卡在比浏览器更小的宽度（？）：

window.r = 7;
function spaceIndicators() {
    var spacing = ($('wrapper').width() - insideWidth) / numCol;

    $('td.indicator').css({'padding-left' : parseInt(spacing) + 'px'});
    $('.firstInd').css({'padding-left' : '0px'});

    if(parseInt(spacing)<= 5){
        r += 1;
        genFundamentalsHTML(r);
        fillValues();
    }
    if(parseInt(spacing)>24){
        r -= 1;
        genFundamentalsHTML(r);
        fillValues();
    }
}

如果我注释掉第二个块，页面实际上变得响应，在宽度减小时添加更多行。但是，当您再次展开时没有任何更改（我希望它返回到正确的行数）。

如何创建具有动态行数的表系统，具体取决于要填充的可用宽度？

PS。我的一个想法是遍历整个过程，计算insideWidth，如果它大于包装宽度，则用行+ = 1重做它，直到你得到一个小于包装宽度的insideWidth。这个问题是我的值是从api检索的，所以每次我想看看insideWidth是什么时我都要重新加载所有数据。