Erstellen einer HTML-Tabelle mit dynamisch erweiterter Spaltenanzahl für die Bildschirmgröße

8

Ich habe lange Liste von Daten (für ein Beispiel sagen Staaten und ihre Abkürzungen) Ich möchte in HTML-Tabelle anzeigen. Anstatt die Daten in 2 x 50 Tabelle anzuzeigen, möchte ich es für größere Bildschirme kompakter (so hat der Benutzer nicht so viel auf und ab scrollen, aber muss nicht horizontal scrollen)

Dies würde also dynamisch wachsen:

%Vor%

zu:

%Vor%

oder das:

%Vor%

usw. ....

Abhängig von der Bildschirmbreite.

Ich mache das in Rail 3 App mit jQuery, also bevorzuge ich jQuery-Lösung, aber offen für alle Ideen.

    
Nathan 28.06.2012, 05:25
quelle

3 Antworten

1

Hier ist eine Demonstration einer tabellenlosen Lösung. Es ist derzeit nur so eingestellt, dass Spalten beim Laden der Seite angeordnet werden, und nimmt kleinere Anpassungen für die Größenanpassung vor.

DEMO: Ссылка

Es basiert auf einem JSON-Array, das ich mit Array sah:

%Vor%

Der HTML-Code kann an die Seite gesendet werden, ohne dass JSON analysiert werden muss, ein kleiner Unterschied beim Abrufen der Länge der Statusliste wäre erforderlich.

HTML:

%Vor%

CSS :( sehr einfach)

%Vor%

JS:

%Vor%     
charlietfl 28.06.2012 06:35
quelle
1

Konnte keine Lösung von der Stange finden, aber diese Funktion sollte den Zweck erfüllen!

%Vor%     
Alex 28.06.2012 05:41
quelle
0

Abhängig von den Anforderungen des Browsers und davon, wie wichtig die Spaltenüberschriften für Sie sind, verfügt css3 über eine Spaltenbreite css-Eigenschaft, die Sie festlegen können. (Derzeit sind -webkit- und -moz-Präfixe erforderlich.)

    
Peter Wilkinson 28.06.2012 08:10
quelle

Tags und Links