How can I continue a 2 column HTML table to appear next to first x rows?

Question

Say I've got an HTML table with two columns, with about 100 rows of data. I'd like to continue the table next to itself after x rows.

It's currently displaying like this:

|head 1| head 2|
|------|-------|
|data 1| data 1|
|data 2| data 2|
 ...
|data 8| data 8|

What I'm trying to achieve is something like this:

|head 1| head 2||head 1| head 2|
|------|-------||------|-------|
|data 1| data 1||data 5| data 5|
|data 2| data 2||data 6| data 6|
|data 3| data 3||data 7| data 7|
|data 4| data 4||data 8| data 8|

My current solution is to just float two tables next to each other and split the data in the backend, but I'm sure there's a better way.

Answer 1

You can change the defaut display: table; to inline-table;.

You can use a class like <table class="inline">.

table.inline  {
display:inline-table;
vertical-align:top; /* or else as your needs */
}