如何根據表中的行數動態地將列添加到表布局？

Question

我有一個表可能有足夠的行來填滿屏幕，我希望能夠添加另一列而不是占用頁面上的垂直空間。 在某一點（8行？）我希望其余行轉移到一個新列。

我現在擁有的：

我想要的是：

以下是該表的html示例：

<table class="base-table">
    <thead>
        <td></td>
        <td></td>
        <td></td>
        <td>min</td>
        <td>avg</td>
        <td>max</td>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td><div style="border:1px solid #ccc;padding:1px;background: white;"><div style="width:4px;height:0;border:5px solid rgb(255, 0, 0);overflow:hidden"></div></div></td>
            <td class="disabled"> stuff </td>
            <td class="disabled"> stuff </td>
            <td class="disabled"> stuff </td>
            <td class="disabled"> stuff </td>
            <td><button id="refresh-stats">Refresh</button></td>
        </tr>
    </tbody>
</table>

Answer 1

您需要做的是保留要追加的當前單元格數的計數，並在每第8次添加后重置它。 這至少應該讓你開始; 一些追加可能對你來說更復雜：

var row = 1, table = document.querySelector('table');
document.querySelector('input').addEventListener('click', function () {
    if (!table.rows[row % 8]) {
        table.appendChild(document.createElement('tr'));
    }
    table.rows[row++ % 8].appendChild(document.createElement('td'));
});

http://jsfiddle.net/ExplosionPIlls/kVmgm/

Answer 2

達到所需的最大行數后，只需創建一個新表。 如果你向左漂浮它們，你將獲得所需的效果