DataTable headers have shorter width than the table

norlen

I have 2 DataTables in the same page. I switch between the 2 tables with a dropdown. The 1st one is working, but when I switch to the 2nd table, the 2nd table have shorter headers. If I delete the Y scroll, It's working. I'm trying to do with multi table, but the problem is the same. How can I solve this problem? I'm using Bootstrap 4 DataTable. I filled the 2 DataTables with MySQL datas.

My code

    <script>
       $(document).ready(function() {
                    $('#hu_data').DataTable({
                        "stateSave": false,
                        //"scrollY": "315px",
                        "scrollCollapse": true,
                        "paging": false,
                        "info": true

                    }); 
                });
    </script>

colin

Hi @norlen ,

Take a look at this example here, this should help,

Cheers,

Colin

norlen

I've got the same problem.

colin

Hi @norlen ,

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin