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]);
  }
}

然后只显示彼此相邻的两个表。

或者您可以使用样式。

制作一个“标题”，其中两个div具有相同的width（300px），两者都是包含字符串Full_name。
使用width制作容器，例如600px。给它一种display: flex; flex-wrap: wrap;
在该容器中添加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>

如何将单列数据分配到两列平均分配数据？

2 个答案: