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

Question

我希望有一个表格显示一半的行,然后在水平旁边包裹并显示另一半的行,而不是一个长的垂直表格.

我正在使用角度,并希望能够将一个数据数组绑定到一个表,但让它像所描述的那样水平跨越两个部分.两个表是一个选项,但这意味着我必须添加更多的逻辑,如果可能的话我宁愿避免.即,对于排序Id必须将数据集重新连接在一起并对它们进行排序,然后再次拆分.

任何指针赞赏.

Answer 1

您可以尝试使用CSS3多列布局.这通常不适用于表(并且它不直接与表一起使用),但是如果将表放入具有类似样式的DIV容器中

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

它可能是你需要的.

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

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

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

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