1つのデータ列を2つの列に均等に分配する方法

Question

私は単一の列の完全名からなるHTMLでテーブルを表示しています：

Full_name 
    Alex 
    Frown 
    Chris 
    Dram 
    Drex 
    Pheobe 

私は名前を表示するにはforループを使用しています。しかし、出力を2列に均等に分散して表示することをお奨めします。

Full_name  Full_name 
    alex   Frown 
    Chris   Dram 
    Drex   Pheobe 

Answer 1

これは単純に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> 

Answer 2

名前をインデックスなど2つの配列に分けることができます。残りのインデックスを2で割った値が0の場合は、それを1つの配列にプッシュし、そうでなければ他の配列にプッシュします。

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

2つのテーブルを並べて表示するだけです。

また、スタイルを使用することもできます。

1. 同じwidth（300ピクセル）を有する2つのdiv要素、文字列FULL_NAMEを含む両方 と、 "ヘッダ" を作ります。
2. widthの容器は、たとえば600pxとしてください。それにスタイルを与えるdisplay: flex; flex-wrap: wrap;
3. そのコンテナにngFor要素を追加し、300pxの幅を与えます。 （600と300は例です）