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.

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.

• javascript
• html
• css

• You can use tbody to group grows. You might try doing that and then setting tbody to display: table-cell to get them side by side. The only issue here is that im not sure if multiple thead elements within a single table are valid, so you might need to put the headers in each tbody i think to get them to display properly. Of course if you are still essentially splitting the data at some point on the backend to get it onto the respective groupings, the only thing this really gets you is having a single table. Fiddle: jsfiddle/H4pjx – prodigitalson Commented Mar 29, 2014 at 17:37

2 Answers 2

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 */
}

You can also try FLEXBOX for the same as follows

HTML

<div>
    <table>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>
</div>

CSS

div {
     display: flex;
     flex-flow: row;
     justify-content: center;
 }
 table {
     border:1px solid red;
 }

Demo

Useful URLS:

1. http://www.sketchingwithcss./samplechapter/
2. http://css-tricks./snippets/css/a-guide-to-flexbox/