jquery datatables fixierte Spalten, die nicht in IE ausgerichtet werden

8

Wenn Sie in IE 10 nachsehen, dass die fixierten Spalten beim Scrollen nicht nach Körperreihen ausgerichtet sind, in Chrome, wenn Sie von rechts nach unten scrollen, ist die fixierte Spalte nicht mit dem Körper ausgerichtet.

Ich habe versucht, mit dem folgenden CSS herumzuspielen, aber es funktioniert nicht. Könnten es die Grenzen und Polsterungen sein, die ich auf dem Tisch habe?

%Vor%

jsfiddle

AKTUALISIEREN

Ich habe aktualisiert es ohne die scrollx / y und festen Spalten. Der Floating-Header ist jedoch immer noch nicht ausgerichtet.

UPDATE mit @Dekel-Code

Ссылка beim Zoomen der Kopfzeilenspalten in die Zeilen

    
shorif2000 06.10.2016, 08:12
quelle

2 Antworten

5

Erweiterung FixedHeader ist nicht mit Scroll-Funktionen kompatibel, wie der Autor von jQuery DataTables sagt.

Aus der offiziellen Dokumentation :

  

Bitte beachten Sie, dass FixedHeader derzeit nicht mit Tabellen kompatibel ist, bei denen die Scrollfunktionen von DataTables aktiviert sind ( scrollX / scrollY ). Detaillierte Kompatibilitätsdetails finden Sie in der Kompatibilitätstabelle .

    
Gyrocode.com 10.10.2016 16:48
quelle
1

Ich habe eine Korrektur für Chrome & amp; Firefox.
Diese Lösung funktioniert auch in IE 10 & amp; 11 (aber nur beim zweiten Mal scrollen Sie nach oben und unten. Versuchen Sie immer noch, dies zu beheben ...).

Die allgemeine Idee besteht darin, die Breite / Höhe-Werte des ursprünglichen Headers zu nehmen und sie auf den neuen "falschen" Header zu setzen, den die Erweiterung fixedHeader erstellt.
Ihr Problem ist, dass es eine Tabelle ist und der Inhalt der Zellen sich auf die gesamte Positionierung auswirkt - Sie können nicht nur die Header-Zeilen klonen (weil ihre Breite nicht gleich ist), und wenn Event, wenn Sie die richtige Breite einstellen auf jeder Zelle - das table -Layout kann sie ändern, daher müssen wir das Layout der Zellen in display: inline-block ändern.

Fügen Sie dies Ihrer js-Datei hinzu (nach dem Erstellen der Datentabelle):

%Vor%

Fügen Sie dies Ihrer CSS-Datei hinzu:

%Vor%

Hier ist eine funktionierende Version:
Ссылка

    
Dekel 19.10.2016 08:25
quelle