Cột cố định dữ liệu jquery không căn chỉnh trong IE

Question

Nếu bạn kiểm tra trong IE 10, cột cố định không phù hợp với hàng nội dung trong khi cuộn xuống, trong chrome khi bạn di chuyển sang phải dưới cột cố định không thẳng hàng với phần thân.

Tôi đã thử phát xung quanh bằng css sau, nhưng không hoạt động. nó có thể là biên giới và đệm tôi có trên bàn không?

.DTFC_LeftBodyLiner{ 
    top: 2px !important; 
} 

jsfiddle

CẬP NHẬT

Tôi có updated nó mà không có sự scrollx/y và cột cố định. Tuy nhiên tiêu đề nổi vẫn không xếp hàng

CẬP NHẬT với mã @Dekel

https://jsfiddle.net/a1mrp2k8/1/ khi phóng to các cột tiêu đề thả hàng

Answer 1

mở rộng FixedHeader không tương thích với các tính năng di chuyển theo tác giả của jQuery DataTables.

Từ official documentation:

Xin lưu ý rằng FixedHeader hiện không tương thích với các bảng có các tính năng cuộn của DataTables kích hoạt (scrollX/scrollY). Vui lòng tham khảo compatibility table để biết chi tiết tương thích đầy đủ.

Answer 2

Tôi đã cố gắng khắc phục sự cố cho Chrome & Firefox.
Giải pháp này cũng hoạt động trong IE 10 & 11 (nhưng chỉ vào lần thứ hai bạn cuộn lên & xuống. Vẫn đang cố sửa lỗi này ...).

Ý tưởng chung là lấy giá trị chiều rộng/chiều cao của tiêu đề gốc và đặt chúng vào tiêu đề "giả" mới mà tiện ích mở rộng fixedHeader đang tạo.
Vấn đề của bạn là bởi vì đó là bảng và nội dung của các ô ảnh hưởng đến tất cả các vị trí - bạn không thể sao chép các tiêu đề (vì chiều rộng của chúng sẽ không giống nhau) và nếu sự kiện nếu bạn đặt chiều rộng chính xác trên mỗi ô - bố cục table có thể thay đổi chúng, vì vậy chúng tôi phải thay đổi bố cục của các ô thành display: inline-block.

Thêm phần này vào tập tin js của bạn (sau khi tạo 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') 
    } 
}); 

Thêm phần này vào file CSS của bạn:

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

Đây là một phiên bản làm việc:
https://jsfiddle.net/9n6zty8t/