数据表 - 带 scrollX 的 fixedHeader

Question

我正在尝试使用带有固定标题 (v3) 的数据表并启用水平滚动。附上 fiddle 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);
}