如何将单列数据分布为两列平均分布数据

Question

我在html中显示一个仅由一列全名组成的表格：

Full_name
  Alex
  Frown
  Chris
  Dram
  Drex
  Pheobe

我使用了 for 循环来显示名称。但是我希望输出显示在两列中，分布均匀，如下所示：

Full_name      Full_name
  alex          Frown 
  Chris         Dram
  Drex          Pheobe

Answer 1

您可以将名称分隔到两个数组中，例如按索引。如果索引的余数除以 2 是 0，则将其推送到一个数组，否则将其推送到另一个数组。

let fullNamesArr...
let fullNamesLength = fullNamesArr.length;
let leftColumn = [];
let rightColumn = [];
for (let i = 0; i < fullNamesLength; i++) {
  if (i % 2 === 0) {
    leftColumnt.push(fullNamesArr[i]);
  } else {
    rightColumn.push(fullNamesArr[i]);
  }
}

然后仅将两个表并排放置。

或者您可以使用样式。

1. 制作一个">标题"，两个具有相同width (300px( 的div，两者都包含字符串Full_name。
2. 制作带有width的容器，例如600px。给它一种display: flex; flex-wrap: wrap;风格
3. 在该容器中添加 ngFor 元素并为其提供 300px 的宽度。(600 和 300 是一个例子(

Answer 2

似乎我想要实现的目标可以简单地通过 css 来完成。只需给 tbody 一个 css 类，在我的情况下，我将其命名为 split-table然后添加以下 css：

<style type="text/css">
  .split-table tr{
    width: 50%;
    float: left;
  }
    .split-table tr:nth-child(1n+2){
      background: rgba(0,0,0,.1);
  }
}
</style>