jQuery DataTables column width is incorrect when using scrollX, a partial width container, and Bootstrap's table-sm class

Question

Running into a weird issue with DataTables. Basically, what I have is a container that is not full width and inside that div I have the table element:

<div style="width: 50%;">
    <table id="example3" class="display nowrap table table-bordered table-striped table-sm" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>ZIP / Post code</th>
                <th>Country</th>
            </tr>
        </thead>
    </table>
</div>

I'm initializing the table with:

$(document).ready(function() {
    var data = [];
    for (var i = 0; i < 10000; i++) {
        data.push([i, i, i, i, i]);
    }

    $('#example3').DataTable({
        data: data,
        scrollX: true
    });
});

Now, I would expect this to work, but what I end up with is this:

Notice how the header columns don't match up with the data.

This works perfectly fine if I remove the "table-sm" class or if the container/table is 100% width. I've tried other things like manually updating the columns ( table.columns.adjust() ) but nothing seems to work.

Anyone have any insight or ideas on how to fix this?

jsFiddle showing the issue: https://jsfiddle.net/vnbm8eh0/

Answer 1

After looking and struggling for an hour or maybe a little more, it seems that the culprit is table-sm . If I remove it everything seems to work fine:

Here's an example:

 $(document).ready(function() { var data = []; for (var i = 0; i < 10000; i++) { data.push([i, i, i, i, i]); } $('#example3').DataTable({ data: data, scrollX: true }); });

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/scroller/2.0.2/css/scroller.bootstrap4.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script> <div style="width:50%; margin: 0 auto;"> <:-- Add "table-sm" to the class list of the table --> <table id="example3" class="display nowrap table table-bordered table-striped" style="width:100%"> <thead> <tr> <th>ID</th> <th>First name</th> <th>Last name</th> <th>ZIP / Post code</th> <th>Country</th> </tr> </thead> </table> </div>

In case you must/prefer to work with the table-sm class, here is another solution to solve it although without using the jQuery DataTable scrollX option:

 $(document).ready(function() { var data = []; for (var i = 0; i < 10000; i++) { data.push([i, i, i, i, i]); } $('#example3').DataTable({ data: data }); });

 #example3 { overflow-x: scroll; max-width: 40%; display: block; white-space: nowrap; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/scroller/2.0.2/css/scroller.bootstrap4.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script> <div style="width:50%; margin: 0 auto;"> <:-- Add "table-sm" to the class list of the table --> <table id="example3" class="display nowrap table table-bordered table-striped table-sm" style="width:100%"> <thead> <tr> <th>ID</th> <th>First name</th> <th>Last name</th> <th>ZIP / Post code</th> <th>Country</th> </tr> </thead> </table> </div>

Happy Coding!