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, Building a table can be simple but, a custom responsive table can be time consuming, I think what you are looking for is to stack new rows beside existing ones at a certain height, check out Display rows of a table side by side, I think it is what you are looking for.