Sticky Headers + Horizontal Scrolling (sticky headers don't scroll)

IMTanuki

environment:
- bootstrap 5.0.1
- jquery 3.6.0
- dt src https://cdn.datatables.net/v/bs5/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/cr-1.5.4/date-1.1.0/fc-3.3.3/fh-3.1.9/kt-2.6.2/r-2.2.9/rg-1.1.3/rr-1.2.8/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.js"></script>

problem:
once sticky headers display, they don't scroll horizontally (i.e. header cols are out of sync with tbody cols).

test case:
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html

table tags:

<table id="table-sandbox"
class="table table-striped // vanila bs5 class - workinng
table-hover // vanilla bs5 class - not working
cell-border row-border // dt classes - not working
dt-head-right // dt class - not working
xmd-table-bordered-outside // my custom class - not working
">
<thead>...

**dt function;**
$ ( '#table-sandbox' ).DataTable ( {
autoWidth: true,
fixedHeader: {
header: true,
headerOffset: $('#xmd-navbar').height()
},
scrollX: true,
scrollY: true
} );

IMTanuki

In the FWIW dept:

headerOffset: $('#xmd-navbar').height() does not calc navbar height consistently, but headerOffset: $('#xmd-navbar').outerHeight() does.

This doesn't affect the horizontal scrolling issue in this post, but for anyone who has different navbar heights (collapsed menu vs not collapsed), it might be useful.