하나의 데이터 열을 데이터를 균등하게 분배하는 두 개의 열로 배포하는 방법은 무엇입니까?

Question

나는 단지 하나의 컬럼 이름으로 구성된 HTML로 테이블을 표시하고 있습니다 :

Full_name 
    Alex 
    Frown 
    Chris 
    Dram 
    Drex 
    Pheobe 

내가 이름을 표시하려면 루프를 사용했다. 하지만 출력을 같은 열로 분산 된 두 개의 열로 표시하려면 다음과 같이하십시오.

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로 나눈 값이 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. 는 문자열 FULL_NAME을 포함하는 같은 width (300 픽셀), 두 두 된 div 더불어, "헤더"를 확인합니다.
2. width과 같이 용기를 만듭니다. 예 : 600px. 스타일을 지정하십시오. display: flex; flex-wrap: wrap;
3. 해당 컨테이너에서 ngFor 요소를 추가하고 300px 너비를 지정하십시오. (600 및 300이 예입니다)