如何将一个HTML表格分成两个部分，左右排列？

Question

我想创建一张表格，其显示一半的行，然后折行并水平地显示其余的一半行，而不是一个长垂直表格。我正在使用angular，并希望能够将一个数据数组绑定到一个表格上，但要像上述描述的那样横跨两个部分。两个表格是一个选项，但这意味着我将不得不添加更多逻辑，如果可能的话，我宁愿避免。例如，为了排序ID，我必须将数据集重新连接并排序，然后再次拆分。欢迎任何指导。

- JMac

---

你知道你会有多少列吗？如果是的话，你可以为每个第n个单元格添加一个类，并更改样式，使其看起来像之间有空格。边框、背景等。编辑：问题可能在于如何将数据添加到表中以将其分割好。 - ggzone

Answer 1

你可以尝试使用CSS3多列布局。这通常不适用于表格（也无法直接与表格一起使用），但如果你将表格放入具有以下样式的DIV容器中：

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

也许这正是你需要的。

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

更新：以上方法似乎只在WebKit浏览器(Chrome, Opera, Safari)中有效。Firefox和IE可能需要采用不同的方法。

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

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

- Yuriy Galanter

---

列格式化插件看起来非常完美！谢谢。 - JMac

哥们儿，我不知道你可以使用父DIV的列数来分割表格。太棒了，谢谢。但是肯定需要调整以适应响应式显示（在x像素以下回退到单个等等）。 - Imperative

如何在两个部分中都显示标题？如果我添加标题，它将仅显示在第一部分。 - Vishal_Kotecha