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.

I'm using angular and want to be able to bind one array of data to one table but have it span two sections horizontally like described. Two tables is an option but it means I'll have to add much more logic which I'd prefer to avoid if possible. i.e. For sorting Id have to join the datasets back together and sort them, before splitting again.

Any pointers appreciated.

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/