Datatables not working correctly with Bootstrap 4 table-responsive and fixed headers

问题

EDIT:

JSFiddle: https://jsfiddle.net/9evb8owd/

If you make the example narrow, and then scroll to the left or right, the fixed header does not follow the table. How do I fix this?

---

I'm using Bootstrap 4 and table-responsive to show the table nicely on mobile.I'm also using Datatables for the filtering, and also fixed headers so the user can see the column names when the scroll.

However, the fixed headers is not working correctly with the table-responsive.

When I scroll left or right on the table, the fixed header columns do not move with it.

<div class="row pt-5">
    <div class="col-lg-10 offset-lg-1 table-responsive">
        <table id="reserved" class="table table-bordered table-striped table-hover table-sm small text-center dt-responsive nowrap">
            <thead>
                <tr>
                    <th>Col One</th>
                    <th>Col Two</th>
                    <th>Col Three</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Val One</td>
                    <td>Val Two</td>
                    <td>Val Three</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

And here's the JavaScript:

$('#reserved').DataTable({
    dom: '<"pime-grid-header"B><"pime-grid-reserved">frtip',
    paging: false,
    fixedHeader: true,
    info: false
});

And here's a screenshot of what's going on:

Fixed headers not aligned

I guess I need 10 reputation to post the image? Kind of dumb.

来源：https://stackoverflow.com/questions/61755589/datatables-not-working-correctly-with-bootstrap-4-table-responsive-and-fixed-hea