ejemplos - jquery datatables columnas fijas no se alinean en IE

manual datatables jquery

Question

Si marca en IE 10, las columnas fijas no se alinean con las filas del cuerpo mientras se desplaza hacia abajo, en cromo cuando se desplaza de derecha a abajo la columna fija no se alinea con el cuerpo.

He intentado jugar con el siguiente CSS, pero no funciona. ¿Podrían ser las fronteras y el relleno que tengo sobre la mesa?

.DTFC_LeftBodyLiner{
    top: 2px !important;
}

jsfiddle

ACTUALIZAR

Lo he actualizado sin scrollx / y y columnas fijas. sin embargo, el encabezado flotante todavía no se alinea

ACTUALIZACIÓN con código @Dekel

https://jsfiddle.net/a1mrp2k8/1/ al hacer zoom en las columnas del encabezado, fila desplegable

Answer 1

Extension FixedHeader no es compatible con las funciones de desplazamiento según el autor de jQuery DataTables.

De la documentación oficial :

Tenga en cuenta que FixedHeader no es actualmente compatible con tablas que tienen habilitadas las funciones de desplazamiento de DataTables ( scrollX / scrollY ). Por favor refiérase a la tabla de compatibilidad para detalles completos de compatibilidad.

Answer 2

Logré tener una solución para Chrome y Firefox.
Esta solución también funciona en IE 10 y 11 (pero solo en la segunda vez que se desplaza hacia arriba y hacia abajo. Intenta arreglar esta ...).

La idea general es tomar los valores de ancho / alto del encabezado original y establecerlos en el nuevo encabezado "falso" que está creando la extensión fixedHeader .
Tu problema es que porque es una tabla y el contenido de las celdas afecta a todo el posicionamiento; no puedes simplemente clonar las filas de encabezados (porque su ancho no será el mismo), y si es un evento si estableces el ancho correcto en cada celda, el diseño de la table puede cambiarlos, por lo que debemos cambiar el diseño de las celdas para display: inline-block .

Agregue esto a su archivo js (después de crear la tabla de datos):

$(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'')
    }
});

Agregue esto a su archivo CSS:

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

Aquí hay una versión de trabajo:
https://jsfiddle.net/9n6zty8t/