如何将一个html表分成两个部分，并排?

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.

我使用的是角度，希望能够将一个数据数组绑定到一个表上，但是要像描述的那样水平地跨越两个部分。两个表是一个选项，但这意味着我必须添加更多的逻辑，如果可能的话，我希望尽量避免。也就是说，对于排序Id，必须将数据集连接到一起并对它们进行排序，然后再进行拆分。

Any pointers appreciated.

任何指针表示赞赏。

1 个解决方案

#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

您可以尝试使用CSS3多列布局。这通常不适用于表(也不直接与表一起工作)，但是如果您将表放在带有样式的DIV容器中。

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

It may be what you need.

这可能是你所需要的。

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

演示:http://jsfiddle.net/J3VB5/

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

更新:以上似乎只适用于WebKit浏览器(Chrome, Opera, Safari)。FF/IE可能需要不同的方法。

For example you can use Columnizer jQuery plugin

例如，您可以使用Columnizer jQuery插件

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

示例2:http://jsfiddle.net/J3VB5/1/

#1