2017-12-31 9 views
0

ich eine Tabelle in HTML-Darstellung von vollständigen Namen nur einer einzigen Spalte aus:Wie verteilt man eine einzelne Datenspalte in zwei Spalten, die Daten gleichmäßig verteilen?

Full_name 
    Alex 
    Frown 
    Chris 
    Dram 
    Drex 
    Pheobe 

Ich habe eine for-Schleife in die Namen angezeigt werden soll. Aber ich möchte, dass die Ausgabe in zwei Spalte ebenso wie verteilt angezeigt werden:

Full_name  Full_name 
    alex   Frown 
    Chris   Dram 
    Drex   Pheobe 
+0

Was Sie bisher versucht haben? – connexo

+0

Ich habe versucht, die Liste in zwei Teile zu verteilen, indem ich die Namen nach ihrer ungeraden oder geraden ID dividiere. Aber da die Daten manchmal zwischen den Listen gelöscht werden können, wird die Liste nicht gleichmäßig aufgeteilt –

Antwort

0

Es scheint, was ich versuchte zu erreichen, könnte einfach durch CSS getan werden. Nur eine CSS-Klasse zu dem tbody geben, in meinem Fall habe ich nannte es split-table dann folgende CSS hinzufügen:

<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> 
0

Sie die Namen zwei Arrays trennen kann, zum Beispiel durch den Index. Wenn der Rest des Index geteilt durch 2 gleich 0 ist, schieben Sie ihn auf ein Array, andernfalls drücken Sie ihn auf das andere Array.

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

und dann nur die beiden Tabellen nebeneinander anzeigen.

Oder Sie können Stile verwenden.

  1. Machen Sie einen "Header", mit zwei divs mit dem gleichen width (300px), die beide die Zeichenfolge FULL_NAME enthält.
  2. Machen Sie einen Container mit width zum Beispiel 600px. Geben Sie ihm einen Stil von display: flex; flex-wrap: wrap;
  3. In diesem Container fügen Sie das Element ngFor hinzu und geben Sie ihm 300px Breite. (600 und 300 ist ein Beispiel)
Verwandte Themen