2017-08-14 3 views
0

Ich habe eine Tabelle, deren zweite Spalte aus mehreren Unterheadern besteht. Für jede Zeile in der Tabelle können ihre Daten in der zweiten Spalte aus mehreren Zeilen bestehen. Ich habe Probleme beim Synchronisieren dieser mehreren Zeilen unter den Unterüberschriften.Füllen von Daten in einer Tabelle mit mehreren Subheadern

http://jsfiddle.net/jkkvy86x/

<table> 
    <thead> 
    <tr> 
     <th>col 1</th> 
     <th colspan="3">col2</th> 
    </tr> 
    <tr> 
     <th></th> 
     <th>h1</th> 
     <th>h2</th> 
     <th>h3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>row1</td> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
     <td>data4</td> 
     <td>data5</td> 
     <td>data6</td> 
    </tr> 
    <tr> 
     <td>row2</td> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
    </tr> 
    </tbody> 
</table> 

Für row1, ich will data4, Daten5, Daten6 auch jeweils unter h1, h2, h3, sein.

Ich mache das in AngularJS/Bootstrap, so dass die Daten/Formatierung wichtig ist. Ich denke nicht, dass das Hinzufügen einer weiteren Zeile mit leeren Daten für die erste Spalte funktionieren würde, obwohl ich offen für Lösungen bin.

+0

Haben Sie ein Beispiel mit Dummy-Daten. Ich will dir helfen! Aber die Datenstruktur wird helfen. – joseglego

+0

Ich fand eine ähnliche Antwort hier: https://stackoverflow.com/questions/30915100/add-multiple-rows-in-one-column-using-angular-ng-repeat Ich habe Probleme mit den Zeilen zur Aufstellung, da meine Daten in der ersten Spalte mehrere Zeilen haben: http://jsfiddle.net/c9fm3eur/ – Geno

+0

Ich kann dir helfen! Wir können dieses Design mit: - Bootstrap, CSS oder sogar Flex! Lass es mich wissen :) @Geno Sie arbeiten mit Tabellen und das ist in Ordnung! Aber das Design, das Sie wollen, ist fortgeschritten und wir können ein besseres Werkzeug dafür verwenden. – joseglego

Antwort

Verwandte Themen