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.

Pudens

Do you know how much columns you will have? If yes you can add a class to every nth cell and change the style the way it looks like theres a space between. border, bgs, and so on. EDIT: problem might be how you add your data into the table to split it up well. – Irresponsible

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/

Bradybradycardia

The columnizer plugin looks perfect! Thanks. – Pudens

Dude. I had no idea you could split a table using column count on the parent DIV. That's hot, thanks. Definitely needs to be tuned for responsive display though (fall back to single under x pixels, etc) – Hexagonal

How do i display headers on both parts? if I add a header, it would be displayed on the first part only – March