数据表 - 带scrollX的fixedHeader

Question

我试图使用带有fixedheader(v3)的Datatables以及启用水平滚动.随附的是小提琴http://jsfiddle.net/xF8hZ/344/

$(document).ready(function() {
    var table = $('#example').DataTable({        
       searching: false,
        paging: false,
        ordering: false,
        info: false,
        fixedHeader: true,
        scrollX: true
    });

} );

.

滚动时,固定页眉宽度与表格的其余部分不对齐.你能帮帮我解决这个问题吗？

谢谢

Answer 1

使用 css Sticky 的纯 css 解决方案（在 ie 11 中不起作用）：删除 fixHeader 插件添加此 css

.dataTables_scrollHead {
  position: sticky !important;
  top: 119px;
  z-index: 99;
  background-color: white;
  box-shadow: 0px 5px 5px 0px rgba(82, 63, 105, 0.08);
}

Answer 2

我通过这样做找到了我的项目的解决方案：

$('#example').scroll(function() {
    if ( $(".fixedHeader-floating").is(":visible") ) {
        $(".fixedHeader-floating").scrollLeft( $(this).scrollLeft() );
    }
});

当您向下滚动时，DataTables 会创建一个新表作为fixedHeader，我在这里所做的是检测用户何时在表上水平滚动$('#example')，然后使用scrollLeft()fixedHeader 来匹配滚动位置。

我还将其添加到我的 .css 中，这样用户将无法在fixedHeader 表上滚动：

.fixedHeader-floating {
    overflow: hidden;
}