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

Posted 2023-03-05

【中文标题】如何将一个 html 表格并排分成两部分？

【英文标题】：How to have one html table split into two sections, side by side?

【发布时间】：2014-01-26 22:00:03

【问题描述】：

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

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

任何指针表示赞赏。

【问题讨论】：

您知道您将拥有多少列吗？如果是，您可以向每个第 n 个单元格添加一个类，并更改样式，使其看起来像之间有一个空格。边框、bgs 等。编辑：问题可能是您如何将数据添加到表中以很好地拆分它。

【参考方案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/

【讨论】：

分栏器插件看起来很完美！谢谢。

老兄。我不知道您可以使用父 DIV 上的列数拆分表。太热了，谢谢不过，肯定需要针对响应式显示进行调整（回退到 x 像素以下的单个等）

如何在两个部分上显示标题？如果我添加标题，它将仅显示在第一部分