Wie erstelle ich eine HTML-Tabelle mit fester / eingefrorener linker Spalte und scrollbarem Körper?
Wie erstelle ich eine HTML Tabelle mit fester/gefrorener linken Spalte und scrollbaren Körper?
Ich brauche eine einfache Lösung. Ich weiß, es ist ähnlich wie einige andere Fragen, wie:
- HTML Tabelle mit festen Header und eine Feste Säule?
- Wie kann ich lock die erste Zeile und die erste Spalte einer Tabelle beim scrollen, eventuell mit JavaScript und CSS?
Aber ich brauche nur eine einzelne linke Spalte eingefroren zu sein und ich würde es vorziehen, eine einfache script-Lösung weniger.
InformationsquelleAutor der Frage agsamek | 2009-08-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
Diese ist ein Interessantes jQuery-plugin, das schafft Feste Header und/oder Spalten.
"Feste Spalte, um wahr zu sein auf der demo-Seite zu sehen, Sie in Aktion.
InformationsquelleAutor der Antwort Markos Fragkakis
Im Fall von Feste Breite der linken Spalte die beste Lösung ist, zur Verfügung gestellt von Eamon Nerbonne.
Im Fall der Variablen Breite der linken Spalte die beste Lösung, die ich gefunden ist, um zwei identische Tabellen und drücken Sie einen über den anderen. Demo: http://jsfiddle.net/xG5QH/6/.
InformationsquelleAutor der Antwort Marcin Raczyński
FWIW, hier ist eine Tabelle, die Scrollbar mit dem Kopf und der Seite fest.
http://codepen.io/ajkochanowicz/pen/KHdih
InformationsquelleAutor der Antwort Adam Grant
Stil der linken Spalte mit
position: fixed
. (Du wirst vermutlich verwenden möchtentop
undleft
Stile zu kontrollieren, wo genau er Auftritt.)InformationsquelleAutor der Antwort chaos
Nahm ich Earmon Nerbonne Antwort und bearbeitet Sie für die Arbeit mit Tabellen zu füllen, die die ganze Breite.
http://jsfiddle.net/DYgD6/6/
Die Breite der fixierten Spalte noch einen Satz Wert wenn.
InformationsquelleAutor der Antwort Jonathan.
Wenn Sie in der Webdevelopper Hölle und müssen, um diese Arbeit für IE6, hier ist ein Beispiel code, den ich verwendet:
Dies funktioniert wohl NUR für IE6, so verwenden Sie bedingte Kommentare für den CSS.
InformationsquelleAutor der Antwort mrmuggles
Keine Notwendigkeit, fügen Sie keine plugin, CSS-tun können, diesen job !!!
Die Idee ist, stellen Sie die position der ersten Zellen in jeder Spalte absolut, und stellen Sie die Breite fest. Ex:
Diese verbergen sich einige Teile der einige Spalten unter der ersten Spalte, so fügen Sie eine leere zweite Spalte (add zweite leere td) mit einer Breite, die gleiche wie die erste Spalte.
Ich getestet und das funktioniert in Chrome und Firefox.
InformationsquelleAutor der Antwort Guru
Eamon Nerbonne, wechselte ich einige css im code und es ist jetzt besser(die Bildlauf-Leiste startet aus der ersten Reihe)
http://jsfiddle.net/At8L8/
Ich habe nur noch zwei line :
InformationsquelleAutor der Antwort Wu Yang Michael
Oper buggy war für alle bisherigen Antworten, wenn getestet habe ich Sie auf meinem mac.
Wenn Sie Blättern Sie durch die Tabelle der festen Spalte verschwindet, nachdem Sie an der ersten fixierten Spalte. Ich ging voran und schrieb den code unten. Es funktioniert in allen Browsern habe ich lokal installiert. Ich weiß nicht, wie ie handhabt es aber.
Nur im Kopf behalten, dass, wenn Sie beabsichtigen, überspringen von Zeilen in einer Tabelle und nicht die andere, oder ändern Sie die Höhen der Zeilen, die Sie möglicherweise anpassen müssen, um diesen code.
InformationsquelleAutor der Antwort user2378892
Alternativ, Stil den tbody mit einer vorgegebenen Größe (über
height:20em
zum Beispiel), und verwenden Sieoverflow-y:scroll;
Dann können Sie eine riesige tbody,, die schriftrolle unabhängig vom rest der Seite.
InformationsquelleAutor der Antwort Eamon Nerbonne
InformationsquelleAutor der Antwort Pradep
Hier ist eine weitere Modifikation der beliebteste Antwort, aber mit der Handhabung der Variablen Länge des Textes in der ersten Spalte-Beschriftungen:
http://jsfiddle.net/ozx56n41/
Im Grunde bin ich mit der zweiten Spalte für die Erstellung der Zeilenhöhe, wie erwähnt wurde. Aber meine Geige tatsächlich funktioniert im Gegensatz zu den meisten oben genannten.
HTML:
CSS:
InformationsquelleAutor der Antwort Daniel
Fügen Sie diese in den Kopf:
Javascript:
InformationsquelleAutor der Antwort Givan