Scrollbare HTML-Tabelle mit oberster Zeile und linker Spalte eingefroren

Hat jemand eine scrollbare Tabelle in HTML implementieren können, in der die TOP-Zeile und die LINKEN Spalten eingefroren sind, aber der Rest der Tabelle scrollbar ist? Ein perfektes Beispiel dafür ist: Google Squared Scrollbare HTML-Tabelle mit oberster Zeile und linker Spalte eingefroren

Ich habe versucht, den Code für die Google Quadrat-Tabelle zu reverse-Engineering, aber ich war bisher nicht erfolgreich.

Hinweis: Ich brauche die Möglichkeit, die oberste Zeile und die linke Spalte gleichzeitig einzufrieren.

Quelle

2009-07-08 Jon

Die Verbindung ist unterbrochen. Kannst du mir einen neuen geben, weil ich wirklich neugierig bin, was der praktische Wert eines solchen Tisches ist. –

Es ist ein funktionierendes Beispiel bei http://ajaxian.com/archives/freeze-pane-functionality, die leicht zu duplizieren sein sollte. Achten Sie auf die Kommentare - viele der Benutzer haben hilfreiche Vorschläge zur Verbesserung des Skripts gemacht.

Per @ Nirks Anfrage, ein direkter Link zur aktiven Demo ist unter http://www.disconova.com/open_source/files/freezepanes.htm.

Quelle

2009-07-08 23:06:07 anschauung

Hat jemand einen besseren Weg gefunden, dies zu tun? Ich arbeite mit einigen RIESIGEN Datensätzen und daher enthalten die Tabellen eine Menge Daten. Das Klonen dieser Daten bis zu 4 mal funktioniert einfach nicht. Hat jQuery irgendwelche Methoden, um das gleiche Ziel zu erreichen? –

Ich verlinkte absichtlich mit dem Artikel - die Kommentare lieferten eine Menge nützlicher Verbesserungen, die das Poster berücksichtigen sollte, IMO. – anschauung

-1

Wenn Sie jQuery verwenden, gibt es viele Plugins für Tabellen mit festem Kopf.

Quelle

2009-07-08 22:25:09 usoban

Gehen Sie mit einer Grundstruktur wie this-

table 
    row 
    column (blank) 
    column 
     table (1 row high, column headers) 
    row 
    column 
     table (1 column wide, row headers) 
    column 
     div (fixed height & width, overflow auto) 
     table (actual data)

Stellen Sie ein festes Tisch-Layout und Spaltenbreite in Pixel explizit angeben. Sie sollten den gleichen Effekt erzielen können.

Quelle

2009-07-08 22:39:48

Was ist, wenn Sie möchten, dass der Zellinhalt Zelldimensionen bestimmt (d. H. Das Standard-Tabellenlayout verwendet)? – allyourcode

-1

Sie benötigen Scrollable (jQuery-Plugin)

Demo is here

Quelle

2009-07-08 22:57:01 Thinker

Demo war in meinem Browser gebrochen (Chrom) – tfwright

Ich habe eine Version von diesem verwendet (für eine Gantt-Diagramm-Stil-Anzeige).

es verwendet 3 Tabellen: 1 für die linke Spalte (die Zeilen), 1 für die oberen (Spalten) und dann die Daten.

Sie müssen hart arbeiten, um die Zellen mit den Größen, mit denen sie übereinstimmen, zu bekommen ( table layout-fixed kann dazu beitragen, dies zu erreichen).

Die Tabellen werden dann in einigen Divs platziert; die linken und oberen divs haben (wie oben vorgeschlagen) die höhe & width und overflow-auto in ihrem css.

Sie dann einige Javascript anschließen, um das Scrollen der links/oben divs mit der Innen ein ...

zu synchronisieren Als ich dort erinnern ein gutes Stück von ‚Fluch-and-try-again‘ war, aber es kann mit minimalen js getan werden.

hth

Quelle

2009-08-22 09:07:48 realcals

Scrollbare HTML-Tabelle mit oberster Zeile und linker Spalte eingefroren

Antwort

Verwandte Themen