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

Question

我想要一个显示一半行的表格，然后将另一半行换行并水平显示在它旁边，而不是有一个长的垂直表格。

我正在使用 angular 并希望能够将一个数据数组绑定(bind)到一个表，但它像描述的那样水平跨越两个部分。两个表是一个选项，但这意味着我将不得不添加更多我希望尽可能避免的逻辑。即，为了排序，Id 必须在再次拆分之前将数据集重新连接在一起并对它们进行排序。

感谢任何指点。

Answer 1

你可以试试 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/