Stałe kolumny danych jquery nie wyrównujące się w IE

Question

Jeśli zaznaczysz w IE 10, stałe kolumny nie są wyrównane z rzędami treści podczas przewijania w dół, w chromie podczas przewijania w prawo do dołu stała kolumna nie wyrównuje się z ciałem.

Próbowałem odtwarzać z następujących css, ale nie działa. czy to mogą być granice i obicia, które mam na stole?

.DTFC_LeftBodyLiner{ 
    top: 2px !important; 
} 

jsfiddle

UPDATE

mam updated to bez scrollx/ri stałych kolumn. jednak nagłówek pływających nadal nie kolejce

aktualizacja z kodem @Dekel

https://jsfiddle.net/a1mrp2k8/1/ podczas powiększania kolumn nagłówka upuść wierszowi

Answer 1

Extension FixedHeader nie jest kompatybilny z funkcjami przewijania według autora jQuery DataTables.

Z official documentation:

Uwaga FixedHeader nie jest obecnie kompatybilny z tabel, które mają funkcje przewijania DataTables włączona (scrollX/scrollY). Szczegółowe informacje na temat zgodności można znaleźć w dokumencie compatibility table.

Answer 2

Udało mi się naprawić dla przeglądarki Chrome & Firefox.
To rozwiązanie działa również w IE 10 & 11 (ale tylko przy drugim przewijaniu w górę & w dół. Nadal próbuję naprawić ten ...).

Ogólną ideą jest pobranie wartości szerokości/wysokości oryginalnego nagłówka i ustawienie ich na nowy "fałszywy" nagłówek tworzony przez rozszerzenie fixedHeader.
Twój problem polega na tym, że ponieważ jest to tabela, a zawartość komórek wpływa na wszystkie pozycje - nie można po prostu sklonować wierszy nagłówków (ponieważ ich szerokość nie będzie taka sama), a jeśli wydarzenie zostanie ustawione, jeśli ustawisz poprawna szerokość każdej komórki - układ table może je zmienić, więc musimy zmienić układ komórek na display: inline-block.

Dodaj do tego pliku js (po utworzeniu DataTable):

$(document).on('scroll', function() { 
    if ($('table.dataTable.fixedHeader-floating').length > 0) { 
     if ($('table.dataTable.fixedHeader-floating').data('header-fix') == 'done') { 
      return; 
     } 

     float_ths = $('table.dataTable.fixedHeader-floating th'); 
     $('table.dataTable thead:eq(0) th').each(function(i) { 
      float_ths.eq(i).width($(this).width()); 
      float_ths.eq(i).height($(this).height()); 
     }) 
     $('table.dataTable.fixedHeader-floating').data('header-fix', 'done') 
    } 
}); 

Dodaj do tego pliku CSS:

table.fixedHeader-floating th { 
    display: inline-block; 
    height: 100%; 
} 

Oto wersja robocza:
https://jsfiddle.net/9n6zty8t/