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

时间:2014-01-08 16:55:30

标签: html css angularjs

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

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

任何指示赞赏。

1 个答案:

答案 0 :(得分:16)

您可以尝试使用CSS3 multi-column layouts。这通常不适用于表(并且它不直接与表一起使用),但如果将表放入具有类似

样式的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 plugin

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