How to have one html table split into two sections, side by side?

Question

I want to have one table which will display half the rows, then wrap and display the other half of the rows next to it horizontally instead of having one long vertical table

Answer 1

You can try playing with CSS3 multi-column layouts. This usually doesn't apply to tables (and it doesn't work directly with tables), but if you place your table into a DIV container with style like

#container {
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
}

It may be what you need.

Demo: http://jsfiddle.net/J3VB5/

Update: the above seems to work only in WebKit browsers (Chrome, Opera, Safari). FF/IE may require a different approach.

For example you can use Columnizer jQuery plugin

Demo 2: http://jsfiddle.net/J3VB5/1/