Wie eine html-Tabelle in zwei Bereiche aufgeteilt, nebeneinander?

Möchte ich eine Tabelle, die zeigt die Hälfte der Zeilen, dann wickeln und anzeigen, die andere Hälfte der Zeilen weiter, um es horizontal statt eine lange vertikale Tabelle.

Ich bin mit Winkel-und wollen in der Lage sein, um das binden eines array von Daten an eine Tabelle, aber es erstreckt sich über zwei Abschnitte horizontal wie beschrieben. Zwei Tabellen ist eine option, aber es bedeutet, dass ich ' ll hinzufügen, viel mehr Logik, die ich lieber vermeiden, wenn möglich. d.h. Für die Sortierung-Id haben, zu verbinden, die Datensätze wieder zusammen und Sortieren Sie Sie, vor der Teilung wieder.

Alle Zeiger geschätzt.

Weißt du, wie viel Spalten du haben? Wenn ja, können Sie eine Klasse hinzufügen zu jeder N-TEN Zelle, und ändern Sie den Stil, die Art und Weise wie es aussieht, theres ein Leerzeichen zwischen. Grenze, bgs und so weiter. EDIT: problem könnte sein, wie Sie fügen Sie Ihre Daten in die Tabelle, um es zu teilen.

InformationsquelleAutor JMac | 2014-01-08

  1. 16

    Können Sie versuchen, spielen mit CSS3 multi-column-layouts. Diese Regel gilt nicht für Tabellen (und es funktioniert nicht direkt mit Tabellen), aber wenn Sie Ihre Tabelle in einen DIV-container mit style wie 

    #container {
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
}

    Kann es sein, was Sie brauchen.

    Demo: http://jsfiddle.net/J3VB5/

    Update: das oben scheint zu funktionieren nur in WebKit-Browsern (Chrome, Opera, Safari). FF/IE erfordern einen anderen Ansatz.

    Beispielsweise können Sie Spaltenelement jQuery-plugin

    Demo 2: http://jsfiddle.net/J3VB5/1/

    Das spaltenelement plugin sieht perfekt aus! Danke.
    Dude. Ich hatte keine Ahnung, Sie könnten, teilen Sie eine Tabelle mit Spalte Zählung auf der übergeordneten DIV. Das ist heiß, danke. Definitiv muss optimiert werden, für eine ansprechende Anzeige, obwohl (Herbst wieder single unter x Pixel, etc)
    Wie kann ich die display-Header auf beide Teile? wenn ich einen header hinzufügen, wäre es angezeigt, auf der ersten Teil nur

    InformationsquelleAutor Yuriy Galanter

Schreibe einen Kommentar