How do I set a fixed table height and have remaining rows display to in a new column?

Question

Currently the table expands vertically. I would like it to stop at a certain fixed height and continue in a column next to it. Essentially, I want the table to bottom out at a fixed spot and continue from the top.

In total I have about 74 rows and I want to display them equally across three separate columns. In the past I have done this by simply using three separate tables at 33% width but given some additional sorting options I am implementing this will not work.

table.full {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 32%;
display: in-line;
border-collapse: collapse;
line-height: 1em;
table-layout: fixed;    

}

            <table class="full">
            <colgroup>
            <col style="width: 75%">
            <col style="width: 25%"></colgroup>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr> and so on...
            </table>

I feel like it should be pretty simple.

Answer 1

@kevMoe，构建表格可能很简单，但是自定义响应式表格可能很耗时，我认为您正在寻找的是以一定高度将新行堆叠在现有行旁边，请查看并排显示表格的行，我认为这就是您正在寻找的。