jquery datatables фиксированные столбцы, не совпадающие в IE

Question

Если вы отметите IE 10, то фиксированные столбцы не выравниваются с строками тела при прокрутке вниз, в хроме, когда вы прокручиваете правое нижнее положение, фиксированный столбец не выравнивается с телом.

Я пробовал играть со следующим css, но его не работает. Может быть, это границы и отступы, которые у меня есть на столе?

.DTFC_LeftBodyLiner{ 
    top: 2px !important; 
} 

jsfiddle

UPDATE

У меня есть updated это без scrollx/у и фиксированных столбцов. Однако заголовок плавающей еще не выстраиваться

UPDATE с @Dekel кодом

https://jsfiddle.net/a1mrp2k8/1/ при масштабировании столбцы заголовков уронить Row

Answer 1

Extension FixedHeader не совместим с прокруткой функций в соответствии с автором JQuery DataTables.

Из official documentation:

Пожалуйста, обратите внимание, что FixedHeader в настоящее время не совместим с таблицами, которые имеют функции прокрутки DataTables включена (scrollX/scrollY). Для получения полной информации о совместимости обратитесь к compatibility table.

Answer 2

У меня есть исправление для Chrome & Firefox.
Это решение также работает в IE 10 & 11 (но только во второй раз, когда вы прокрутите вверх & вниз, все еще пытаетесь исправить это ...).

Общая идея состоит в том, чтобы принять значения ширины/высоты исходного заголовка и установить их в новый «поддельный» заголовок, который создает расширение fixedHeader.
Ваша проблема в том, что поскольку это таблица и содержимое ячеек влияют на все позиционирование - вы не можете просто клонировать строки заголовков (потому что их ширина не будет одинаковой), а если событие, если вы установите правильная ширина в каждой ячейке - макет table может изменить их, поэтому мы должны изменить расположение ячеек на display: inline-block.

Добавьте это в файл JS (после создания 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') 
    } 
}); 

Добавьте это в ваш файл CSS:

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

Вот рабочая версия:
https://jsfiddle.net/9n6zty8t/