javascript - テーブルの行数に基づいてテーブル レイアウトに列を動的に追加する方法は?

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

必要な最大行数に達したら、新しいテーブルを作成するだけです。左に浮かせれば、思い通りの効果が得られます