Dieses Problem hat mich eine Weile beschäftigt.

Hier sind zwei HTML-Tabellen mit festen Headern auf derselben Seite:

Site 1

https://datatables.net/release-datatables/extras/FixedHeader/two_tables.html

Aber diese 2 Tabellen sind auf der Seite selbst .. aber nicht separat mit in einem scrollbaren div.

Was ich meine ist .. es ist nicht so etwas:

Seite 2

http://www.matts411.com/static/demos/grid/index.html

(Tatsächlich kann ich 2 dieser Tabellen auf derselben Seite haben. Die Überschriften bleiben in diesen Divs erhalten. Wenn Sie nach rechts, links, oben oder unten scrollen.)

Oder dieses

Seite 3

http://www.tablefixedheader.com/demonstration/

-

Ok .. wie kann ich mit Site 1 (mit datatable) den gleichen Effekt erzielen wie mit Site 2 (Grid Demo)?

Ich möchte einfache Standardbibliotheken wie jquery, jqueryui, jquery mobile, bootstrap, datatable verwenden, um mein Bedürfnis zu erfüllen, mehrere Tabellen auf derselben Seite zu haben ... jede kann auf ihrer eigenen Breite und Höhe scrollen ... mit auf der Seite. Ich möchte keine Bibliotheken von einer zufälligen Seite im Netz verwenden ... die in Zukunft möglicherweise keine Unterstützung mehr haben.

Beispiel:

HTML-Seite startet ...

Tabelle 1 ... sagen wir 50 Spalten ... und 500 Zeilen ... (angezeigt mit einem scrollbaren Div mit 400 x 300 Pixel und festen Überschriften)

und direkt unter der Tabelle nach ein paar Zeilen ... ist ...

Tabelle 2 ... sagen wir 30 Spalten ... und 400 Zeilen ... (angezeigt mit einem scrollbaren Div mit 400 x 300 Pixel und festen Überschriften)

Ende HTML-Seite

-

Ich habe Site 2 ausprobiert, aber die Verwendung von Bootstrap für Stile mit diesem Raster hat die Seite zerstört, und die Stile wurden nicht mit Bootstrap abgeglichen.