Javascript 如何根据表中的行数向表布局动态添加列？

我有一个表，可能有足够的行来填充屏幕，我希望能够添加另一列，而不是占用页面上的垂直空间。在某一点上（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>

闵
平均值
最大值
东西
东西
东西
东西
刷新

您需要做的基本工作是记录要追加的当前单元格编号，并在每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'));
});

---

当您达到所需的最大行数时，只需创建一个新表即可。如果将它们向左浮动，将获得所需的效果

能否添加表格HTML的缩短版本？我们不需要所有的行，但可能有些人会发现2-3个示例行很有用。