Datatables - fixedHeader with scrollX

Question

I am trying to use Datatables with fixedheader (v3) as well as enable horizontal scrolling. Attached is the 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
    });

} );

.

When scrolling the fixedheader width doesn't align with the rest of the table. Can you help me solve this please?

Thanks

Answer 1

Pure css solution using css sticky (not work in ie 11): remove the fixHeader plugin add this 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);
}